fix(Header): fix incorrect height for the items on the Header

lumada-design · Jun 13, 2023 · 6256028 · 6256028
1 parent 4ce3347
commit 6256028
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/packages/core/src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx b/packages/core/src/components/Header/Navigation/MenuItem/MenuItem.styles.tsx
@@ -42,16 +42,20 @@ export const MenuItemLi = styled(
   ...(!$selected &&
     !$isMenu && {
       marginTop: theme.header.selectedItemBorderTopThickness,
-      marginBottom: theme.header.selectedItemBorderBottomThickness,
+      paddingBottom: theme.header.selectedItemBorderBottomThickness,
       paddingTop: theme.header.selectedItemBorderBottomThickness,
-      height: `calc(100% - ${theme.header.selectedItemBorderTopThickness} - ${theme.header.selectedItemBorderBottomThickness})`,
+      height: "100%",
+      borderTop: `${theme.header.selectedItemBorderTopThickness} solid ${theme.header.backgroundColor}`,
+      borderBottom: `${theme.header.selectedItemBorderBottomThickness} solid ${theme.header.backgroundColor}`,
     }),
   ...(!$selected &&
     $isMenu && {
       marginTop: theme.header.secondLevelSelectedItemBorderTopThickness,
-      marginBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
+      paddingBottom: theme.header.secondLevelSelectedItemBorderBottomThickness,
       paddingTop: theme.header.secondLevelSelectedItemBorderBottomThickness,
-      height: `calc(100% - ${theme.header.secondLevelSelectedItemBorderTopThickness} - ${theme.header.secondLevelSelectedItemBorderBottomThickness})`,
+      height: "100%",
+      borderTop: `${theme.header.secondLevelSelectedItemBorderTopThickness} solid ${theme.header.secondLevelBackgroundColor}`,
+      borderBottom: `${theme.header.secondLevelSelectedItemBorderBottomThickness} solid ${theme.header.secondLevelBackgroundColor}`,
     }),
 }));