misc(customer) improve tabs display

getlago · Jan 17, 2024 · 39a9593 · 39a9593
1 parent e493731
commit 39a9593
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/designSystem/NavigationTab.tsx b/src/components/designSystem/NavigationTab.tsx
@@ -133,28 +133,38 @@ const TabsBlock = styled.div<{
  }
  }
 
+ /* Negative margin bellow allows to show the focus ring aroung buttons */
  ${({ $align }) =>
  $align === NavigationTabAlignEnum.left
  ? css`
- padding: ${theme.spacing(4)} ${theme.spacing(12)};
+ padding: ${theme.spacing(4)} ${theme.spacing(13)};
+ margin: 0 -${theme.spacing(1)};
 
  ${theme.breakpoints.down('sm')} {
- padding: ${theme.spacing(4)};
+ padding: ${theme.spacing(4)} ${theme.spacing(5)};
+ margin: 0 -${theme.spacing(1)};
  }
  `
  : $align === NavigationTabAlignEnum.superLeft
  ? css`
- padding: ${theme.spacing(4)} 0;
+ padding: ${theme.spacing(4)} ${theme.spacing(1)};
+ margin: 0 -${theme.spacing(1)};
 
  ${theme.breakpoints.down('sm')} {
- padding: ${theme.spacing(4)};
+ padding: ${theme.spacing(4)} ${theme.spacing(1)};
+ margin: 0 -${theme.spacing(1)};
  }
  `
  : css`
  > * {
  flex: 1;
  }
  `}
+
+ /* Prevent buttons to goes on multiple line */
+ button div .MuiTypography-root {
+ white-space: nowrap;
+ }
  }
 
  &.navigation-tab--vertical {