fix nested MenuList padding

CartoDB · May 30, 2024 · 9dcaee4 · 9dcaee4
1 parent 070d1cc
commit 9dcaee4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/react-ui/src/components/molecules/Menu.js b/packages/react-ui/src/components/molecules/Menu.js
@@ -6,7 +6,11 @@ const StyledMenu = styled(MuiMenu, {
   shouldForwardProp: (prop) => !['extended', 'width', 'height'].includes(prop)
 })(({ extended, width, height, theme }) => ({
   '.MuiMenu-list': {
-    backgroundColor: '#ff970038 !important' // TODO: remove, just for QA purposes
+    backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes
+
+    '& .MuiList-root': {
+      backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes,
+    }
   },
   ...(extended && {
     '.MuiMenuItem-root': {

diff --git a/packages/react-ui/src/components/molecules/MenuList.js b/packages/react-ui/src/components/molecules/MenuList.js
@@ -13,6 +13,10 @@ const StyledMenuList = styled(MuiMenuList, {
   '&.MuiList-root': {
     backgroundColor: '#ff970038 !important', // TODO: remove, just for QA purposes
 
+    '& .MuiList-root': {
+      backgroundColor: 'transparent !important' // TODO: remove, just for QA purposes,
+    },
+
     ...(width && {
       width: width,
       minWidth: width

diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -143,6 +143,9 @@ export const navigationOverrides = {
 
         // Indent sublevels, ugly but needed to avoid issues with hover
         '& .MuiList-root': {
+          paddingTop: 0,
+          paddingBottom: 0,
+
           '& .MuiListItem-root': {
             paddingLeft: theme.spacing(4)
           },