fix: fixed margin of table (closes #117)

packages/library/src/modules/Table/components/TableContainer/TableContainer.tsx

@@ -4,25 +4,24 @@ import { PropsWithChildren, useMemo } from 'react'
 import { useGitContext } from 'context/GitContext'
 import { placeholderCommits } from 'modules/Graph/strategies/Grid/hooks/usePlaceholderData/data'
 import { ROW_HEIGHT } from 'constants/constants'
-import { HEADER_ROW_HEIGHT, TABLE_MARGIN_TOP } from 'modules/Table/constants'
+import { HEADER_ROW_HEIGHT } from 'modules/Table/constants'
 import { TableContainerProps } from 'modules/Table/components/TableContainer/types'
 
 export const TableContainer = ({
   row,
   rowQuantity,
   children,
   className,
-  styleOverrides
+  styleOverrides,
 }: PropsWithChildren<TableContainerProps>) => {
   const { rowSpacing, showHeaders } = useGitContext()
 
   const gridTemplateRows = useMemo(() => {
     // If no commits are visible as we're showing
     // the placeholder data for the skeleton view,
     // then use that size, else just use the log data length.
-    const commitsVisible = rowQuantity > 0
-      ? rowQuantity
-      : placeholderCommits.length
+    const commitsVisible =
+      rowQuantity > 0 ? rowQuantity : placeholderCommits.length
 
     // If the table headers are turned off, then we simply
     // repeat the same row height for all rows.
@@ -35,50 +34,40 @@ export const TableContainer = ({
     // spacing is increased, we must subtract half of it
     // from the height of the first header row to counteract
     // the gap between the header and the first data row.
-    const headerRowHeight = HEADER_ROW_HEIGHT - (rowSpacing / 2)
+    const headerRowHeight = HEADER_ROW_HEIGHT - rowSpacing / 2
 
     // All other rows (with data) get a fixed height.
     const remainingRowsHeight = `repeat(${commitsVisible}, ${ROW_HEIGHT}px)`
 
     return `${headerRowHeight}px ${remainingRowsHeight}`
   }, [rowQuantity, rowSpacing, showHeaders])
 
-  const marginTop = useMemo(() => {
-    if (showHeaders) {
-      return TABLE_MARGIN_TOP
-    }
-
-    return (rowSpacing / 2) + TABLE_MARGIN_TOP
-  }, [rowSpacing, showHeaders])
-
   if (row) {
     return (
       <div
-        id='react-git-log-table'
-        data-testid='react-git-log-table'
+        id="react-git-log-table"
+        data-testid="react-git-log-table"
         style={{
-          marginTop: TABLE_MARGIN_TOP,
-          ...styleOverrides
+          ...styleOverrides,
         }}
       >
         {children}
       </div>
     )
   }
-  
+
   return (
     <div
-      id='react-git-log-table'
-      data-testid='react-git-log-table'
+      id="react-git-log-table"
+      data-testid="react-git-log-table"
       style={{
         ...styleOverrides,
-        marginTop,
         gridTemplateRows,
-        rowGap: rowSpacing
+        rowGap: rowSpacing,
       }}
       className={classNames(styles.tableContainer, className)}
     >
       {children}
     </div>
   )
-}
+}

packages/library/src/modules/Table/constants.ts

@@ -5,11 +5,3 @@
  * on the graph. Assuming 0 row spacing.
  */
 export const HEADER_ROW_HEIGHT = 47
-
-/**
- * The number of pixels of margin at the
- * top of the table element that offsets
- * it enough to line-up correctly with
- * the graph
- */
-export const TABLE_MARGIN_TOP = 12