From 8d929f06670e27055f488c282c13aa929578eccc Mon Sep 17 00:00:00 2001
From: Chris Berry <anotherchrisberry@gmail.com>
Date: Thu, 27 Jun 2019 16:26:36 -0500
Subject: [PATCH] fix(core): fix alignment on cards in card choices (#7158)

---
 .../configure/AmazonLoadBalancerChoiceModal.tsx      | 12 ++++++++----
 .../providerSelection/ProviderSelectionModal.tsx     |  2 +-
 app/scripts/modules/core/src/modal/modals.less       |  2 --
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/scripts/modules/amazon/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx b/app/scripts/modules/amazon/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx
index 233c8bf9c9d..d288333d91a 100644
--- a/app/scripts/modules/amazon/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx
+++ b/app/scripts/modules/amazon/src/loadBalancer/configure/AmazonLoadBalancerChoiceModal.tsx
@@ -20,10 +20,14 @@ export class AmazonLoadBalancerChoiceModal extends React.Component<
   };
 
   public static show(props: ILoadBalancerModalProps): Promise<void> {
-    return ReactModal.show(AmazonLoadBalancerChoiceModal, {
-      ...props,
-      className: 'create-pipeline-modal-overflow-visible',
-    });
+    return ReactModal.show(
+      AmazonLoadBalancerChoiceModal,
+      {
+        ...props,
+        className: 'create-pipeline-modal-overflow-visible modal-lg',
+      },
+      { bsSize: 'lg' },
+    );
   }
 
   constructor(props: ILoadBalancerModalProps) {
diff --git a/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx b/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
index fb991a0e2ce..6901c207419 100644
--- a/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
+++ b/app/scripts/modules/core/src/cloudProvider/providerSelection/ProviderSelectionModal.tsx
@@ -50,7 +50,7 @@ export class ProviderSelectionModal extends React.Component<
           <div className="card-choices">
             {providerOptions.map(provider => (
               <div
-                className={`card ${selectedProvider === provider && 'active'}`}
+                className={`card vertical center middle ${selectedProvider === provider && 'active'}`}
                 key={provider}
                 onClick={() => this.setProvider(provider)}
               >
diff --git a/app/scripts/modules/core/src/modal/modals.less b/app/scripts/modules/core/src/modal/modals.less
index 95caef45872..2638fc2595c 100644
--- a/app/scripts/modules/core/src/modal/modals.less
+++ b/app/scripts/modules/core/src/modal/modals.less
@@ -334,8 +334,6 @@ abbr.select2-search-choice-close {
     margin: 15px;
     padding: 30px 15px;
     cursor: pointer;
-    display: flex;
-    align-items: center;
     &.active {
       border: 1px solid var(--color-accent);
       background-color: var(--color-accent-g2);