diff --git a/frontend/package.json b/frontend/package.json index d4ac9a73cf..dbcb8e5ae8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -88,17 +88,17 @@ "react-router-dom": "6.3.0", "react-table": "7.8.0", "react-test-renderer": "17.0.2", - "react-timeago": "6.2.1", + "react-timeago": "7.1.0", "sass": "1.52.3", "semver": "7.3.7", "swr": "1.3.0", "tss-react": "3.7.0", "typescript": "4.7.3", - "vite": "2.9.10", + "vite": "2.9.12", "vite-plugin-env-compatible": "^1.1.1", "vite-plugin-svgr": "2.1.0", "vite-tsconfig-paths": "3.5.0", - "vitest": "0.14.1", + "vitest": "0.14.2", "whatwg-fetch": "^3.6.2" }, "jest": { diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts index 32f9ed3452..fb11a9dd4b 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.styles.ts +++ b/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, diff --git a/frontend/src/component/common/Table/Table/Table.styles.ts b/frontend/src/component/common/Table/Table/Table.styles.ts index 1897370c27..b006579729 100644 --- a/frontend/src/component/common/Table/Table/Table.styles.ts +++ b/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: { diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index aaaabc4279..4fb113786d 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -194,6 +194,9 @@ export const FeatureToggleListTable: VFC = () => { const [firstRenderedIndex, lastRenderedIndex] = useVirtualizedRange(rowHeight); + const tableHeight = + rowHeight * rows.length + theme.shape.tableRowHeightCompact; + return ( { } > - +
- + {rows.map((row, index) => { + const top = + index * rowHeight + + theme.shape.tableRowHeightCompact; + const isVirtual = index < firstRenderedIndex || index > lastRenderedIndex; @@ -275,10 +280,7 @@ export const FeatureToggleListTable: VFC = () => { {...row.getRowProps()} key={row.id} className={classes.row} - style={{ - top: `${index * rowHeight}px`, - display: 'flex', - }} + style={{ display: 'flex', top }} > {row.cells.map(cell => ( -
+
- + {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={{ - top: `${index * rowHeight}px`, - display: 'flex', - }} + style={{ display: 'flex', top }} > {row.cells.map(cell => (