Shared:ContextMenu:Change styles.

packages/shared/components/context-menu/ContextMenu.styled.ts

@@ -111,15 +111,16 @@ const StyledContextMenu = styled.div<{
     box-shadow: ${(props) => props.theme.newContextMenu.boxShadow};
     -moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow};
     -webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow};
-    padding: ${(props) => props.theme.newContextMenu.padding};
-
-    @media ${tablet} {
-      ${(props) => props.changeView && styledTabletView}
-    }
 
     @media ${mobile} {
       ${(props) => props.changeView && styledMobileView}
     }
+
+    .scroll-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
   }
 
   .contextmenu-header {
@@ -223,7 +224,6 @@ const StyledContextMenu = styled.div<{
     box-shadow: ${(props) => props.theme.dropDown.boxShadow};
     -moz-box-shadow: ${(props) => props.theme.dropDown.boxShadow};
     -webkit-box-shadow: ${(props) => props.theme.dropDown.boxShadow};
-    padding: 4px 0px;
 
     white-space: nowrap;
     overflow: hidden;
@@ -246,7 +246,7 @@ const StyledContextMenu = styled.div<{
     position: relative;
     border: ${(props) => props.theme.dropDownItem.border};
     margin: ${(props) => props.theme.dropDownItem.margin};
-    padding: ${(props) => props.theme.dropDownItem.padding};
+    padding: 0 16px;
     font-family: ${(props) => props.theme.fontFamily};
     font-style: normal;
     background: none;
@@ -261,10 +261,6 @@ const StyledContextMenu = styled.div<{
 
     -webkit-touch-callout: none;
 
-    @media ${tablet} {
-      padding: 0 16px;
-    }
-
     &:hover {
       background-color: ${(props) =>
         props.noHover
@@ -296,11 +292,18 @@ const StyledContextMenu = styled.div<{
     &:hover {
       cursor: default !important;
     }
+
+    @media ${mobile} {
+      margin-right: 8px !important;
+      width: calc(100% - 24px) !important;
+    }
   }
 
   .p-contextmenu .p-menuitem {
     position: relative;
     margin: ${(props) => props.theme.dropDownItem.margin};
+
+    min-width: max-content;
   }
 
   .p-contextmenu .scroll-body .p-menuitem {
@@ -391,4 +394,14 @@ StyledContextMenu.defaultProps = {
   theme: Base,
 };
 
+export const StyledList = styled.ul<{
+  listHeight: number;
+}>`
+  & > :first-child {
+    .scroll-body {
+      height: ${(props) => `${props.listHeight}px`};
+    }
+  }
+`;
+
 export { StyledContextMenu };

packages/shared/themes/base.ts

@@ -2751,9 +2751,9 @@ export const getBaseTheme = () => {
       },
       separator: {
         borderBottom: `1px solid ${grayLightMid} !important`,
-        margin: "6px 16px 6px 16px !important",
+        margin: "6px 0px 6px 16px !important",
         height: "1px !important",
-        width: "calc(100% - 32px) !important",
+        width: "calc(100% - 16px) !important",
       },
       text: {
         header: {
@@ -2774,7 +2774,7 @@ export const getBaseTheme = () => {
       background: "none",
       svgFill: black,
       header: {
-        height: "49px",
+        height: "55px",
         borderBottom: `1px solid ${grayLightMid}`,
         marginBottom: "6px",
       },
@@ -2784,7 +2784,7 @@ export const getBaseTheme = () => {
       padding: "0 12px",
       mobile: {
         height: "36px",
-        padding: "0 16px 6px",
+        padding: "6px 16px",
       },
     },
     newContextMenu: {
@@ -2792,7 +2792,6 @@ export const getBaseTheme = () => {
       borderRadius: "6px",
       mobileBorderRadius: "6px 6px 0 0",
       boxShadow: "0px 8px 16px 0px #040F1B14",
-      padding: "6px 0px",
       border: "none",
       devices: {
         maxHeight: "calc(100vh - 64px)",

packages/shared/themes/dark.ts

@@ -2731,9 +2731,9 @@ const Dark: TTheme = {
     },
     separator: {
       borderBottom: `1px solid #474747 !important`,
-      margin: "6px 16px 6px 16px !important",
+      margin: "6px 0px 6px 16px !important",
       height: "1px !important",
-      width: "calc(100% - 32px) !important",
+      width: "calc(100% - 16px) !important",
     },
     text: {
       header: {
@@ -2754,7 +2754,7 @@ const Dark: TTheme = {
     background: "none",
     svgFill: "#eeeeee",
     header: {
-      height: "49px",
+      height: "55px",
       borderBottom: `1px solid #474747`,
       marginBottom: "6px",
     },
@@ -2764,7 +2764,7 @@ const Dark: TTheme = {
     padding: "0 12px",
     mobile: {
       height: "36px",
-      padding: "0 16px 6px",
+      padding: "6px 16px",
     },
   },
   newContextMenu: {
@@ -2772,7 +2772,6 @@ const Dark: TTheme = {
     borderRadius: "6px",
     mobileBorderRadius: "6px 6px 0 0",
     boxShadow: "0px 8px 16px 0px #040F1B29",
-    padding: "6px 0px",
     border: "1px solid #474747",
     devices: {
       maxHeight: "calc(100vh - 64px)",