From 61e09745ccea65172f6196b930439e516eab6739 Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 16:19:44 -0500
Subject: [PATCH 1/6] style(onboarding): Improve mobile layout for SCM feature
 cards

Unify the SCM feature card into a single 4-column grid (icon, label, volume, switch) with the description spanning the lower row, so the volume tag and switch no longer overflow on narrow viewports. Drop the responsive gap override on the info cards grid for consistency.
---
 .../onboarding/components/scmFeatureCard.tsx  | 59 ++++++++++---------
 .../components/scmFeatureInfoCards.tsx        |  2 +-
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/static/app/views/onboarding/components/scmFeatureCard.tsx b/static/app/views/onboarding/components/scmFeatureCard.tsx
index c9f337b01a51..6f258699500c 100644
--- a/static/app/views/onboarding/components/scmFeatureCard.tsx
+++ b/static/app/views/onboarding/components/scmFeatureCard.tsx
@@ -48,20 +48,20 @@ export function ScmFeatureCard({
     >
       <ScmSelectableContainer
         isSelected={isSelected}
-        padding={{xs: 'md', md: 'lg'}}
+        padding="lg"
         height="100%"
         borderCompensation={3}
       >
         <Flex align="start">
           <Grid
-            columns="min-content 1fr"
+            columns="min-content 1fr min-content min-content"
             rows="min-content min-content"
-            gap={{xs: 'xs md', md: 'xs lg'}}
+            gap="xs lg"
             align="center"
             width="100%"
             areas={`
-                    "icon label"
-                    ". description"
+                    "icon label volume switch"
+                    ". description . ."
                   `}
           >
             <Container area="icon">
@@ -79,31 +79,36 @@ export function ScmFeatureCard({
                 {label}
               </Text>
             </Container>
-            <Container area="description">
+
+            <Container area="volume">
+              {isVolumeLoading ? (
+                <Placeholder height="22px" width="100px" />
+              ) : (
+                <Tooltip title={volumeTooltip} delay={100}>
+                  <Tag variant="muted" icon={<IconInfo size="sm" />}>
+                    {volume}
+                  </Tag>
+                </Tooltip>
+              )}
+            </Container>
+
+            <Container area="switch">
+              <Tooltip title={disabledReason} disabled={!disabledReason} delay={500}>
+                <Switch
+                  checked={isSelected}
+                  disabled={disabled}
+                  role="presentation"
+                  tabIndex={-1}
+                  readOnly
+                  size="sm"
+                />
+              </Tooltip>
+            </Container>
+
+            <Container area="description" column="2 / 4">
               <Text variant="secondary">{description}</Text>
             </Container>
           </Grid>
-          <Flex align="start" gap="sm">
-            {isVolumeLoading ? (
-              <Placeholder height="22px" width="100px" />
-            ) : (
-              <Tooltip title={volumeTooltip} delay={100}>
-                <Tag variant="muted" icon={<IconInfo size="sm" />}>
-                  {volume}
-                </Tag>
-              </Tooltip>
-            )}
-            <Tooltip title={disabledReason} disabled={!disabledReason} delay={500}>
-              <Switch
-                checked={isSelected}
-                disabled={disabled}
-                role="presentation"
-                tabIndex={-1}
-                readOnly
-                size="sm"
-              />
-            </Tooltip>
-          </Flex>
         </Flex>
       </ScmSelectableContainer>
     </ScmCardButton>
diff --git a/static/app/views/onboarding/components/scmFeatureInfoCards.tsx b/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
index 1a1ede0074a4..a6621698f236 100644
--- a/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
+++ b/static/app/views/onboarding/components/scmFeatureInfoCards.tsx
@@ -70,7 +70,7 @@ export function ScmFeatureInfoCards({
               <Grid
                 columns="min-content 1fr"
                 rows="min-content min-content"
-                gap={{xs: 'xs md', sm: 'xs lg'}}
+                gap="xs lg"
                 align="center"
                 areas={`
                     "icon label"

From 138fde19e98fc5016a7a47fe043ab4b4572058f5 Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 16:57:58 -0500
Subject: [PATCH 2/6] fix(onboarding): Truncate skip button label on narrow
 viewports

The "Continue without a repo" skip button on the SCM connect step pushed the action row to overflow on narrow viewports. Wrap the label in an ellipsis-truncating Text element and allow the surrounding flex and the button itself to shrink below their natural content size so the row stays within the viewport.
---
 static/app/views/onboarding/scmConnect.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/static/app/views/onboarding/scmConnect.tsx b/static/app/views/onboarding/scmConnect.tsx
index 9af98d7b6f1f..2134ac971482 100644
--- a/static/app/views/onboarding/scmConnect.tsx
+++ b/static/app/views/onboarding/scmConnect.tsx
@@ -184,7 +184,7 @@ export function ScmConnect({onComplete, genBackButton}: StepProps) {
           paddingTop="3xl"
         >
           <Flex align="center">{genBackButton?.()}</Flex>
-          <Flex align="center" gap="md">
+          <Flex align="center" gap="md" minWidth={0}>
             {!selectedRepository && (
               <Button
                 analyticsEventKey="onboarding.scm_connect_skip_clicked"
@@ -194,8 +194,9 @@ export function ScmConnect({onComplete, genBackButton}: StepProps) {
                 }}
                 onClick={() => onComplete()}
                 variant="transparent"
+                style={{minWidth: 0}}
               >
-                {t('Continue without a repo')}
+                <Text ellipsis>{t('Continue without a repo')}</Text>
               </Button>
             )}
 

From 09150add5355cc033d9afc3b654d43159936607b Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 17:04:03 -0500
Subject: [PATCH 3/6] fix(onboarding): Vertically center volume and switch in
 SCM feature card

Tooltip wraps non-DOM children in an inline span, which baseline-aligns inside the grid cell and visually offsets the volume tag and switch from the icon and label. Swap the surrounding Container for a Flex with align center so the Tooltip wrapper is vertically centered within its cell.
---
 static/app/views/onboarding/components/scmFeatureCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/app/views/onboarding/components/scmFeatureCard.tsx b/static/app/views/onboarding/components/scmFeatureCard.tsx
index 6f258699500c..8b6c554c01a1 100644
--- a/static/app/views/onboarding/components/scmFeatureCard.tsx
+++ b/static/app/views/onboarding/components/scmFeatureCard.tsx
@@ -80,7 +80,7 @@ export function ScmFeatureCard({
               </Text>
             </Container>
 
-            <Container area="volume">
+            <Flex area="volume" align="center">
               {isVolumeLoading ? (
                 <Placeholder height="22px" width="100px" />
               ) : (
@@ -90,9 +90,9 @@ export function ScmFeatureCard({
                   </Tag>
                 </Tooltip>
               )}
-            </Container>
+            </Flex>
 
-            <Container area="switch">
+            <Flex area="switch" align="center">
               <Tooltip title={disabledReason} disabled={!disabledReason} delay={500}>
                 <Switch
                   checked={isSelected}
@@ -103,7 +103,7 @@ export function ScmFeatureCard({
                   size="sm"
                 />
               </Tooltip>
-            </Container>
+            </Flex>
 
             <Container area="description" column="2 / 4">
               <Text variant="secondary">{description}</Text>

From 56ad4d186838de56ad4f4618642c4096884a020f Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 17:08:53 -0500
Subject: [PATCH 4/6] fix(onboarding): Extend SCM feature card description to
 last column

Span the description across the full remaining grid width using `column="2 / -1"` so it fills the row beneath the label, volume, and switch instead of stopping at column 4.
---
 static/app/views/onboarding/components/scmFeatureCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/onboarding/components/scmFeatureCard.tsx b/static/app/views/onboarding/components/scmFeatureCard.tsx
index 8b6c554c01a1..166c36dcecee 100644
--- a/static/app/views/onboarding/components/scmFeatureCard.tsx
+++ b/static/app/views/onboarding/components/scmFeatureCard.tsx
@@ -105,7 +105,7 @@ export function ScmFeatureCard({
               </Tooltip>
             </Flex>
 
-            <Container area="description" column="2 / 4">
+            <Container area="description" column="2 / -1">
               <Text variant="secondary">{description}</Text>
             </Container>
           </Grid>

From 0015f0921809a8fd979524145c515ea6bee1ee9f Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 17:24:37 -0500
Subject: [PATCH 5/6] ref(onboarding): Collapse SCM feature card volume and
 switch into single column

Merge the volume tag and switch into a shared toggle cell so the grid drops from 4 columns to 3 and the description naturally spans beneath the label and toggle.
---
 .../app/views/onboarding/components/scmFeatureCard.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/static/app/views/onboarding/components/scmFeatureCard.tsx b/static/app/views/onboarding/components/scmFeatureCard.tsx
index 166c36dcecee..ea0b7c293840 100644
--- a/static/app/views/onboarding/components/scmFeatureCard.tsx
+++ b/static/app/views/onboarding/components/scmFeatureCard.tsx
@@ -54,14 +54,14 @@ export function ScmFeatureCard({
       >
         <Flex align="start">
           <Grid
-            columns="min-content 1fr min-content min-content"
+            columns="min-content 1fr min-content"
             rows="min-content min-content"
             gap="xs lg"
             align="center"
             width="100%"
             areas={`
-                    "icon label volume switch"
-                    ". description . ."
+                    "icon label toggle"
+                    ". description ."
                   `}
           >
             <Container area="icon">
@@ -80,7 +80,7 @@ export function ScmFeatureCard({
               </Text>
             </Container>
 
-            <Flex area="volume" align="center">
+            <Flex area="toggle" align="start" gap="sm">
               {isVolumeLoading ? (
                 <Placeholder height="22px" width="100px" />
               ) : (
@@ -90,9 +90,7 @@ export function ScmFeatureCard({
                   </Tag>
                 </Tooltip>
               )}
-            </Flex>
 
-            <Flex area="switch" align="center">
               <Tooltip title={disabledReason} disabled={!disabledReason} delay={500}>
                 <Switch
                   checked={isSelected}

From f286534a268d29a38cdd9948b3d38e6faa20ba6d Mon Sep 17 00:00:00 2001
From: Jay Goss <jaygoss@gmail.com>
Date: Tue, 12 May 2026 17:27:20 -0500
Subject: [PATCH 6/6] fix(onboarding): Inherit button color in truncated skip
 label

Text defaults to variant=primary which sets color from `tokens.content.primary`, overriding the transparent button's `tokens.interactive.transparent.neutral.content.primary`. Set `variant=inherit` so the label keeps the button's color across states.
---
 static/app/views/onboarding/scmConnect.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/app/views/onboarding/scmConnect.tsx b/static/app/views/onboarding/scmConnect.tsx
index 2134ac971482..96c4299a6233 100644
--- a/static/app/views/onboarding/scmConnect.tsx
+++ b/static/app/views/onboarding/scmConnect.tsx
@@ -196,7 +196,9 @@ export function ScmConnect({onComplete, genBackButton}: StepProps) {
                 variant="transparent"
                 style={{minWidth: 0}}
               >
-                <Text ellipsis>{t('Continue without a repo')}</Text>
+                <Text ellipsis variant="inherit">
+                  {t('Continue without a repo')}
+                </Text>
               </Button>
             )}