fix: fix styling

emmanuelonah · Jan 6, 2025 · e74b312 · e74b312
1 parent c861973
commit e74b312
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/client/src/components/table/items-widget/index.styles.tsx b/client/src/components/table/items-widget/index.styles.tsx
@@ -8,23 +8,34 @@ const stylesReset = css`
   background-image: none;
 `;
 
+const TableContainer = styled.div`
+  width: 100%;
+  overflow: hidden;
+  overflow-y: scroll;
+  height: calc(100vh - 25rem);
+  min-height: calc(100vh - 25rem);
+  border-radius: ${({ theme }) => theme.typography.borderRadius.sm};
+`;
+
 const Table = styled.table`
   ${stylesReset}
   border-collapse: collapse;
   border-spacing: 0;
   background-color: ${({ theme }) => theme.colors.dark40};
-  border-radius: ${({ theme }) => theme.typography.borderRadius.sm};
   border-collapse: separate;
   border-spacing: 0;
   width: 100%;
-  height: calc(100vh - 25rem);
   margin: 0 auto;
   padding: 0.5rem;
   border: solid 0.0625rem ${({ theme }) => theme.colors.dark50};
+  table-layout: fixed;
+  min-height: calc(100vh - 25rem);
 `;
 
 const Thead = styled.thead`
   ${stylesReset}
+  display: table;
+  width: 100%;
   color: ${({ theme }) => theme.colors.ash400};
   text-align: left;
   font-size: ${({ theme }) => theme.typography.preText.fontSize};
@@ -41,21 +52,29 @@ const Th = styled.th`
   font-weight: lighter;
   padding: 0.5rem;
   text-align: left;
+
+  &:last-child {
+    text-align: right;
+  }
 `;
 
 const Tbody = styled.tbody`
   ${stylesReset}
+  display: table;
+  width: 100%;
 `;
 
 const TbodyRow = styled.tr`
   ${stylesReset}
-  color: #E2E2E2;
+  width: 100%;
+  table-layout: fixed;
+  color: #e2e2e2;
   font-size: ${({ theme }) => theme.typography.smallText.fontSize};
   height: 1.5rem;
+  padding: 1rem 0;
 
   &:hover {
     background-color: ${({ theme }) => theme.colors.dark200};
-    border-radius: ${({ theme }) => theme.typography.borderRadius.sm};
   }
 `;
 
@@ -64,6 +83,11 @@ const Td = styled.td`
   padding: 0.5rem;
   font-weight: lighter;
   text-align: left;
+  font-size: ${({ theme }) => theme.typography.smallText.fontSize};
+
+  &:last-child {
+    text-align: right;
+  }
 `;
 
-export { Table, Thead, Tbody, TheadRow, TbodyRow, Th, Td };
+export { TableContainer, Table, Thead, Tbody, TheadRow, TbodyRow, Th, Td };
diff --git a/client/src/components/table/items-widget/index.tsx b/client/src/components/table/items-widget/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Table as StyledTable } from './index.styles';
+import { Table as StyledTable, TableContainer } from './index.styles';
 
 type TableSectionProps =
   | JSX.IntrinsicElements['thead']
@@ -12,5 +12,9 @@ type TableProps = {
 };
 
 export function Table(props: Readonly<TableProps>) {
-  return <StyledTable>{props.children}</StyledTable>;
+  return (
+    <TableContainer>
+      <StyledTable>{props.children}</StyledTable>
+    </TableContainer>
+  );
 }
diff --git a/client/src/layouts/page-wrapper/index.styles.tsx b/client/src/layouts/page-wrapper/index.styles.tsx
@@ -32,11 +32,6 @@ const Footer = styled.footer`
   font-size: ${({ theme }) => theme.typography.preText.fontSize};
   font-weight: lighter;
   text-align: center;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin: 0 auto;
   padding: 1rem;
 `;