From ad92c8415a9db0a27f7841add571a764a592f84c Mon Sep 17 00:00:00 2001
From: bkspace <sammyisseyegh@gmail.com>
Date: Tue, 17 Oct 2023 16:05:03 +0100
Subject: [PATCH] Remove <BlockStack> surrounding Browse button(s) and add
 margin-top

---
 .../CustomerEligibilityCard.scss                |  4 ++++
 .../CustomerEligibilityCard.tsx                 | 17 +++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomerEligibilityCard/CustomerEligibilityCard.scss b/src/components/CustomerEligibilityCard/CustomerEligibilityCard.scss
index 0cca304c..48419ad3 100644
--- a/src/components/CustomerEligibilityCard/CustomerEligibilityCard.scss
+++ b/src/components/CustomerEligibilityCard/CustomerEligibilityCard.scss
@@ -9,3 +9,7 @@
   text-overflow: ellipsis;
   color: var(--p-text-subdued);
 }
+
+.CustomerModalActivator {
+  margin-top: var(--p-space-2);
+}
diff --git a/src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx b/src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx
index f573fb8e..1b85e0b5 100644
--- a/src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx
+++ b/src/components/CustomerEligibilityCard/CustomerEligibilityCard.tsx
@@ -82,20 +82,25 @@ export function CustomerEligibilityCard({
           />
 
           {eligibility.value === Eligibility.CustomerSegments && (
-            <BlockStack gap="400">
-              {customerSegmentSelector}
+            <>
+              <div className={styles.customerSelectorActivator}>
+                {customerSegmentSelector}
+              </div>
 
               <SelectedCustomerSegmentsList
                 selectedCustomerSegments={selectedCustomerSegments}
               />
-            </BlockStack>
+            </>
           )}
 
           {eligibility.value === Eligibility.Customers && (
-            <BlockStack gap="400">
-              {customerSelector}
+            <>
+              <div className={styles.customerSelectorActivator}>
+                {customerSelector}
+              </div>
+
               <SelectedCustomersList selectedCustomers={selectedCustomers} />
-            </BlockStack>
+            </>
           )}
         </BlockStack>
       </Card>