fix(ui): stack ConfigureSSO header and drop step separators on mobile (#8984)

Author: iagodahlem

.changeset/tricky-spoons-matter.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the `<ConfigureSSO />` wizard header on small screens: the back link now stacks above the step indicators and the step separators are hidden, so the steps no longer wrap onto a second line.

packages/ui/src/components/ConfigureSSO/ConfigureSSOHeader.tsx

@@ -1,4 +1,5 @@
 import { Flex, useLocalizations } from '@/customizables';
+import { mqu } from '@/styledSystem';
 
 import { ProfileCardHeader } from './elements/ProfileCard';
 import { Stepper } from './elements/Stepper';
@@ -21,7 +22,7 @@ export const ConfigureSSOHeader = ({ title }: ConfigureSSOHeaderProps): JSX.Elem
     <ProfileCardHeader>
       {title}
 
-      <Flex sx={title ? { marginInlineStart: 'auto' } : undefined}>
+      <Flex sx={title ? { marginInlineStart: 'auto', [mqu.md]: { marginInlineStart: 0 } } : undefined}>
         <Stepper>
           {visibleSteps.map((step, index) => {
             const isCurrent = index === currentVisibleIndex;

packages/ui/src/components/ConfigureSSO/elements/ProfileCard.tsx

@@ -1,5 +1,5 @@
 import { descriptors, Flex } from '@/customizables';
-import { common } from '@/styledSystem';
+import { common, mqu } from '@/styledSystem';
 
 type ProfileCardHeaderProps = React.PropsWithChildren;
 
@@ -16,6 +16,11 @@ export const ProfileCardHeader = (props: ProfileCardHeaderProps): JSX.Element =>
       borderBottomWidth: theme.borderWidths.$normal,
       borderBottomStyle: theme.borderStyles.$solid,
       borderBottomColor: theme.colors.$borderAlpha100,
+      [mqu.md]: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: theme.space.$4,
+      },
     })}
   />
 );

packages/ui/src/components/ConfigureSSO/elements/Stepper/Stepper.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
 import { Checkmark, ChevronRight } from '@/icons';
+import { mqu } from '@/styledSystem';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -15,6 +16,7 @@ const Root = ({ children }: StepperProps): JSX.Element => {
       sx={theme => ({
         gap: theme.space.$2,
         flexWrap: 'wrap',
+        [mqu.md]: { gap: theme.space.$3 },
       })}
     >
       {items.map((child, index) => (
@@ -34,6 +36,7 @@ const Root = ({ children }: StepperProps): JSX.Element => {
               icon={ChevronRight}
               size='md'
               colorScheme='neutral'
+              sx={{ [mqu.md]: { display: 'none' } }}
             />
           )}
         </Span>
@@ -127,6 +130,7 @@ const Skeleton = ({ totalSteps = 4 }: SkeletonProps): JSX.Element => (
     sx={theme => ({
       gap: theme.space.$2,
       flexWrap: 'wrap',
+      [mqu.md]: { gap: theme.space.$3 },
     })}
   >
     {Array.from({ length: totalSteps }).map((_, index) => (
@@ -139,7 +143,7 @@ const Skeleton = ({ totalSteps = 4 }: SkeletonProps): JSX.Element => (
             icon={ChevronRight}
             size='md'
             colorScheme='neutral'
-            sx={{ opacity: 0.16 }}
+            sx={{ opacity: 0.16, [mqu.md]: { display: 'none' } }}
           />
         )}
       </React.Fragment>