fix: remove negative visual space between switcher elements

contentful · Apr 30, 2024 · bd10031 · bd10031
1 parent d6d360b
commit bd10031
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts
@@ -22,6 +22,7 @@ export const getNavbarSwitcherItemStyles = () => ({
     alignItems: 'center',
     justifyContent: 'center',
     border: `solid 1px ${tokens.gray300}`,
+    borderLeft: 'none',
     display: 'inline-flex',
     margin: 0,
     minWidth: 0,
@@ -31,15 +32,12 @@ export const getNavbarSwitcherItemStyles = () => ({
     zIndex: 2,
 
     whiteSpace: 'nowrap',
-    '&:not(:first-child)': {
-      clipPath: `path('M0 24C6 24 10 18 10 10C10 5 6 0 0 0H400C400 0 400 5 400 24H0Z')`,
-    },
     '&:first-child': {
       minWidth: '24px',
     },
     '&:nth-child(2)': {
       zIndex: 1,
-      left: `-${tokens.spacingXs}`,
+      left: '-13px', //magic number due to round border design
       paddingLeft: tokens.spacingM,
       borderRadius: `0 3rem 3rem 0`,
       span: {
@@ -52,7 +50,7 @@ export const getNavbarSwitcherItemStyles = () => ({
       },
     },
     '&:nth-child(3)': {
-      left: `-${tokens.spacingM}`,
+      left: '-24px', //magic number due to round border design
       paddingLeft: tokens.spacingM,
       borderRadius: `0 3rem 3rem 0`,
       fontFamily: tokens.fontStackMonospace,
@@ -75,6 +73,7 @@ export const getNavbarSwitcherItemStyles = () => ({
     },
   }),
   breadcrumbsItemCircle: css({
+    border: `solid 1px ${tokens.gray300}`,
     borderRadius: '50%',
     color: tokens.gray400,
     padding: 0,