full width/bigger option buttons on mobile

getsentry · May 24, 2024 · 05da74e · 05da74e
1 parent f8925bc
commit 05da74e
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx
@@ -204,17 +204,21 @@ export function OnboardingOptionButtons({
   return (
     <div
       ref={buttonsRef}
-      className={`flex flex-wrap gap-4 py-2 bg-white/90 sticky top-[80px] z-[1000] rounded shadow-[var(--shadow-6)] transition ${
+      className={`flex flex-wrap gap-3 py-2 bg-white/90 sticky top-[80px] z-[1000] rounded shadow-[var(--shadow-6)] transition ${
         isSticky ? 'px-2 backdrop-blur' : ''
       }`}
     >
       {options.map(option => (
         <Button
           variant="surface"
-          size="2"
+          size={{
+            xs: '3',
+            md: '2',
+          }}
           disabled={option.disabled}
           asChild
           key={option.id}
+          className="w-full md:w-auto"
         >
           <label role="button">
             <Checkbox