Updated padding of custom header

RealWagmi · Nov 27, 2023 · 317947e · 317947e
1 parent 53f5e08
commit 317947e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -3,6 +3,7 @@ import {
   TableContentWrap,
   TableHeader,
   TableHeaderTitleBtn,
+  TableHeaderWrap,
   TableItem,
   TablePagBtn,
   TablePagWrap,
@@ -77,7 +78,7 @@ export default function Table<T = any>({
 
   return (
     <TableWrap minHeight={minHeight}>
-      <Box width={"100%"}>{header}</Box>
+      <TableHeaderWrap>{header}</TableHeaderWrap>
       <TableContentWrap>
         {items.length && !loading ? (
           <TableContent data-testid={`table-content`} cols={headers}>

diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
@@ -132,7 +132,7 @@ export const Table = () => {
         changePage={setPage}
         header={
           showCustomHeader ? (
-            <Text pb={"24px"} px={"8px"} variant="h5">
+            <Text pb={"24px"} variant="h5">
               Custom header
             </Text>
           ) : undefined

diff --git a/src/components/Table/styles.ts b/src/components/Table/styles.ts
@@ -19,6 +19,15 @@ export const TableWrap = styled(Grid)`
   }
 `;
 
+export const TableHeaderWrap = styled(Box)`
+  width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+
+  @media (min-width: ${SCREEN_WIDTH.SM}px) {
+    padding: 0 8px;
+  }
+`;
 export const TableContentWrap = styled(Box)`
   overflow-x: auto;
   width: 100%;
@@ -39,7 +48,6 @@ export const TableContent = styled(Grid)<{ cols: ITableHeader<any>[] }>`
   }
 `;
 
-//${(cols.length / 2) * 100}% + ${(cols.length - 1) * 8}px}
 export const TableRow = styled(Grid)<{ cols: ITableHeader<any>[]; clickable?: boolean }>`
   position: relative;
   align-items: center;
@@ -54,13 +62,13 @@ export const TableRow = styled(Grid)<{ cols: ITableHeader<any>[]; clickable?: bo
   }
 
   cursor: ${({ clickable }) => (clickable ? "pointer" : "default")};
-  
+
   &:hover {
-    background: ${({theme, clickable}) => clickable ? rgba( theme.colors.primaryDefault, 0.2) : ''};
+    background: ${({ theme, clickable }) => (clickable ? rgba(theme.colors.primaryDefault, 0.2) : "")};
   }
-  
+
   transition: background-color 0.2s;
-  
+
   & > * {
     padding: 0 4px;
   }