Remove <BlockStack> surrounding Browse button(s) and add margin-top

Shopify · Oct 17, 2023 · ad92c84 · ad92c84
1 parent ed9936a
commit ad92c84
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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>