[@mantine/core] Stepper: Fix last item being cut off when used inside…

… flex container (#3062)
mantinedev · Nov 28, 2022 · 23ccf51 · 23ccf51
1 parent 3fd2e64
commit 23ccf51
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/mantine-core/src/Stepper/Step/Step.styles.ts b/src/mantine-core/src/Stepper/Step/Step.styles.ts
@@ -21,7 +21,8 @@ export const iconSizes = {
 export default createStyles(
   (
     theme,
-    { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }: StepStylesParams
+    { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }: StepStylesParams,
+    getRef
   ) => {
     const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes });
     const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm;
@@ -35,13 +36,11 @@ export default createStyles(
         minHeight: `calc(${_iconSize}px + ${theme.spacing.xl}px + ${separatorDistanceFromIcon}px)`,
         marginTop: `${separatorDistanceFromIcon}px`,
         overflow: 'hidden',
-
         '&:first-of-type': {
           marginTop: 0,
         },
-
-        '&:last-of-type': {
-          minHeight: 'auto',
+        [`&:last-of-type .${getRef('verticalSeparator')}`]: {
+          display: 'none',
         },
       },
     } as const;
@@ -72,6 +71,7 @@ export default createStyles(
         borderLeft: `2px solid ${
           theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
         }`,
+        ref: getRef('verticalSeparator'),
       },
 
       verticalSeparatorActive: {