Web: Components: added mobile styles for GroupMenuItem

packages/asc-web-components/table-container/GroupMenuItem.js

@@ -3,13 +3,16 @@ import PropTypes from "prop-types";
 import { ReactSVG } from "react-svg";
 import styled from "styled-components";
 import Button from "../button";
-import { tablet } from "../utils/device";
+import { mobile, tablet } from "../utils/device";
 
 const StyledButton = styled(Button)`
   border: none;
-  padding: 0px 10px 0 10px;
+  padding: 4px 10px 0 10px;
+  height: 50px;
+  min-width: fit-content;
 
-  :hover {
+  :hover,
+  :active {
     border: none;
   }
 
@@ -27,6 +30,13 @@ const StyledButton = styled(Button)`
       margin: 0 auto;
     }
   }
+
+  @media ${mobile} {
+    padding: 18px 16px 0 16px;
+    height: 50px;
+    font-size: 0;
+    line-height: 0;
+  }
 `;
 
 const GroupMenuItem = ({ item }) => {

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import Base from "../themes/base";
-import { tablet } from "../utils/device";
+import { mobile, tablet } from "../utils/device";
+import Scrollbar from "../scrollbar";
 
 const StyledTableContainer = styled.div`
   -moz-user-select: none;
@@ -84,6 +85,10 @@ const StyledTableGroupMenu = styled.div`
     width: calc(100% + 40px);
   }
 
+  @media ${mobile} {
+    height: 52px;
+  }
+
   .table-container_group-menu-checkbox {
     margin-left: 24px;
     ${(props) => props.checkboxMargin && `margin-left: ${props.checkboxMargin}`}
@@ -248,6 +253,12 @@ const StyledEmptyTableContainer = styled.div`
   height: 40px;
 `;
 
+const StyledScrollbar = styled(Scrollbar)`
+  .scroll-body {
+    display: flex;
+  }
+`;
+
 StyledTableRow.defaultProps = { theme: Base };
 
 export {
@@ -260,4 +271,5 @@ export {
   StyledTableSettings,
   StyledTableGroupMenu,
   StyledEmptyTableContainer,
+  StyledScrollbar,
 };

packages/asc-web-components/table-container/TableGroupMenu.js

@@ -1,9 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Checkbox from "../checkbox";
-import { StyledTableGroupMenu } from "./StyledTableContainer";
+import { StyledTableGroupMenu, StyledScrollbar } from "./StyledTableContainer";
 import ComboBox from "../combobox";
-import Scrollbar from "../scrollbar";
 import GroupMenuItem from "./GroupMenuItem";
 
 const TableGroupMenu = (props) => {
@@ -43,11 +42,11 @@ const TableGroupMenu = (props) => {
           selectedOption={{}}
         />
         <div className="table-container_group-menu-separator" />
-        {/* <Scrollbar> */}
-        {headerMenu.map((item, index) => (
-          <GroupMenuItem key={index} item={item} />
-        ))}
-        {/* </Scrollbar> */}
+        <StyledScrollbar>
+          {headerMenu.map((item, index) => (
+            <GroupMenuItem key={index} item={item} />
+          ))}
+        </StyledScrollbar>
       </StyledTableGroupMenu>
     </>
   );