Skip to content

fix(onboarding): Mobile style tweaks for SCM onboarding #115426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jaydgoss wants to merge 6 commits into
base: master
Choose a base branch
from
+36 −30
Open

fix(onboarding): Mobile style tweaks for SCM onboarding #115426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
61e0974
style(onboarding): Improve mobile layout for SCM feature cards
jaydgoss May 12, 2026
138fde1
fix(onboarding): Truncate skip button label on narrow viewports
jaydgoss May 12, 2026
09150ad
fix(onboarding): Vertically center volume and switch in SCM feature card
jaydgoss May 12, 2026
56ad4d1
fix(onboarding): Extend SCM feature card description to last column
jaydgoss May 12, 2026
0015f09
ref(onboarding): Collapse SCM feature card volume and switch into sin…
jaydgoss May 12, 2026
f286534
fix(onboarding): Inherit button color in truncated skip label
jaydgoss May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 30 additions & 27 deletions static/app/views/onboarding/components/scmFeatureCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
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 toggle"
". description ."
`}
>
<Container area="icon">
Expand All @@ -79,31 +79,34 @@ export function ScmFeatureCard({
{label}
</Text>
</Container>
<Container area="description">

<Flex area="toggle" 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>

<Container area="description" column="2 / -1">
<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>
Expand Down
2 changes: 1 addition & 1 deletion static/app/views/onboarding/components/scmFeatureInfoCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 5 additions & 2 deletions static/app/views/onboarding/scmConnect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -194,8 +194,11 @@ export function ScmConnect({onComplete, genBackButton}: StepProps) {
}}
onClick={() => onComplete()}
variant="transparent"
style={{minWidth: 0}}
>
{t('Continue without a repo')}
<Text ellipsis variant="inherit">
{t('Continue without a repo')}
</Text>
</Button>
)}

Expand Down
Loading