refactor: avoid relative positioning for tbody (#1085)

* refactor: expose vite dev server on local IP

* refactor: avoid relative positioning for tbody

* refactor: avoid height on tbody as well

* refactor: use row height from theme

frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts

@@ -3,7 +3,9 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
     tableHeader: {
         '& > th': {
+            height: theme.shape.tableRowHeightCompact,
             border: 0,
+
             '&:first-of-type': {
                 borderTopLeftRadius: theme.shape.borderRadiusMedium,
                 borderBottomLeftRadius: theme.shape.borderRadiusMedium,

frontend/src/component/common/Table/Table/Table.styles.ts

@@ -4,6 +4,8 @@ export const useStyles = makeStyles<{
     rowHeight: 'auto' | 'standard' | 'dense' | 'compact' | number;
 }>()((theme, { rowHeight }) => ({
     table: {
+        position: 'relative',
+
         '& tbody tr': {
             height:
                 {

frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx

@@ -192,6 +192,9 @@ export const FeatureToggleListTable: VFC = () => {
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);
 
+    const tableHeight =
+        rowHeight * rows.length + theme.shape.tableRowHeightCompact;
+
     return (
         <PageContent
             isLoading={loading}
@@ -248,16 +251,18 @@ export const FeatureToggleListTable: VFC = () => {
             }
         >
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()} rowHeight={rowHeight}>
+                <Table
+                    {...getTableProps()}
+                    rowHeight={rowHeight}
+                    style={{ height: tableHeight }}
+                >
                     <SortableTableHeader headerGroups={headerGroups} flex />
-                    <TableBody
+                    <TableBody {...getTableBodyProps()}>
-                        {...getTableBodyProps()}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
-                    >
                         {rows.map((row, index) => {
+                            const top =
+                                index * rowHeight +
+                                theme.shape.tableRowHeightCompact;
+
                             const isVirtual =
                                 index < firstRenderedIndex ||
                                 index > lastRenderedIndex;
@@ -273,10 +278,7 @@ export const FeatureToggleListTable: VFC = () => {
                                     {...row.getRowProps()}
                                     key={row.id}
                                     className={classes.row}
-                                    style={{
+                                    style={{ display: 'flex', top }}
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -398,6 +398,9 @@ export const ProjectFeatureToggles = ({
     const [firstRenderedIndex, lastRenderedIndex] =
         useVirtualizedRange(rowHeight);
 
+    const tableHeight =
+        rowHeight * rows.length + theme.shape.tableRowHeightCompact;
+
     return (
         <PageContent
             isLoading={loading}
@@ -464,21 +467,23 @@ export const ProjectFeatureToggles = ({
             }
         >
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()} rowHeight={rowHeight}>
+                <Table
+                    {...getTableProps()}
+                    rowHeight={rowHeight}
+                    style={{ height: tableHeight }}
+                >
                     <SortableTableHeader
                         // @ts-expect-error -- verify after `react-table` v8
                         headerGroups={headerGroups}
                         className={styles.headerClass}
                         flex
                     />
-                    <TableBody
+                    <TableBody {...getTableBodyProps()}>
-                        {...getTableBodyProps()}
-                        style={{
-                            height: `${rowHeight * rows.length}px`,
-                            position: 'relative',
-                        }}
-                    >
                         {rows.map((row, index) => {
+                            const top =
+                                index * rowHeight +
+                                theme.shape.tableRowHeightCompact;
+
                             const isVirtual =
                                 index < firstRenderedIndex ||
                                 index > lastRenderedIndex;
@@ -493,10 +498,7 @@ export const ProjectFeatureToggles = ({
                                     hover
                                     {...row.getRowProps()}
                                     className={styles.row}
-                                    style={{
+                                    style={{ display: 'flex', top }}
-                                        top: `${index * rowHeight}px`,
-                                        display: 'flex',
-                                    }}
                                 >
                                     {row.cells.map(cell => (
                                         <TableCell

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -112,7 +112,7 @@ exports[`renders an empty list correctly 1`] = `
         className="tss-54jt3w-bodyContainer"
       >
         <table
-          className="MuiTable-root tss-z7cn64-table mui-133vm37-MuiTable-root"
+          className="MuiTable-root tss-rjdss1-table mui-133vm37-MuiTable-root"
           role="table"
         >
           <thead
@@ -120,7 +120,7 @@ exports[`renders an empty list correctly 1`] = `
             role={null}
           >
             <tr
-              className="MuiTableRow-root MuiTableRow-head tss-1an32mz-tableHeader mui-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-head tss-1sk7xq7-tableHeader mui-cn4v9y-MuiTableRow-root"
               role="row"
             >
               <th

frontend/vite.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
     },
     server: {
         open: true,
+        host: true,
         proxy: {
             [`${UNLEASH_BASE_PATH}api`]: {
                 target: UNLEASH_API,