diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c26a25c7..a3c890990 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ You can also check the # Unreleased -Nothing yet. +- Fixes + - Last table row is no longer cut # [4.9.2] - 2024-10-04 diff --git a/app/charts/table/table-content.tsx b/app/charts/table/table-content.tsx index d629cae35..b31e3b467 100644 --- a/app/charts/table/table-content.tsx +++ b/app/charts/table/table-content.tsx @@ -61,6 +61,7 @@ const useStyles = makeStyles((theme: Theme) => ({ minHeight: SORTING_ARROW_WIDTH, alignItems: "center", justifyContent: "flex-start", + whiteSpace: "nowrap", }, headerGroupMeasure: { justifyContent: "flex-end", diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx index 7f673c013..246b33f5a 100644 --- a/app/charts/table/table-state.tsx +++ b/app/charts/table/table-state.tsx @@ -25,6 +25,7 @@ import { } from "@/charts/shared/chart-state"; import { useSize } from "@/charts/shared/use-size"; import { BAR_CELL_PADDING, TABLE_HEIGHT } from "@/charts/table/constants"; +import { getTableUIElementsOffset } from "@/charts/table/table"; import { TableStateVariables, useTableStateData, @@ -128,9 +129,17 @@ const useTableState = ( left: 10, }; const chartWidth = width - margins.left - margins.right; // We probably don't need this - const chartHeight = Math.min(TABLE_HEIGHT, chartData.length * rowHeight); + const chartHeight = Math.min( + TABLE_HEIGHT, + // + 1 for the header row + (chartData.length + 1) * rowHeight + ); - const height = chartHeight + margins.top + margins.bottom; + const height = + chartHeight + + margins.top + + margins.bottom + + getTableUIElementsOffset({ showSearch: settings.showSearch, width }); const bounds = { width, height, diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx index aa3077a1e..111036844 100644 --- a/app/charts/table/table.tsx +++ b/app/charts/table/table.tsx @@ -62,6 +62,23 @@ const useStyles = makeStyles(() => { }; }); +const shouldShowCompactMobileView = (width: number) => { + return width < MOBILE_VIEW_THRESHOLD; +}; + +/** Use to make sure we don't cut the table off by having other UI elements enabled */ +export const getTableUIElementsOffset = ({ + showSearch, + width, +}: { + showSearch: boolean; + width: number; +}) => { + return ( + (showSearch ? 48 : 0) + (shouldShowCompactMobileView(width) ? 48 : 0) + 4 + ); +}; + export const Table = () => { const { bounds, @@ -78,8 +95,7 @@ export const Table = () => { const [compactMobileViewEnabled, setCompactMobileView] = useState(false); - const showCompactMobileView = - bounds.width < MOBILE_VIEW_THRESHOLD && compactMobileViewEnabled; + const showCompactMobileView = shouldShowCompactMobileView(bounds.width); // Search & filter data const [searchTerm, setSearchTerm] = useState(""); @@ -211,7 +227,7 @@ export const Table = () => { style: { ...style, flexDirection: "column", - width: "max-content", + width: "100%", }, })} > @@ -281,6 +297,10 @@ export const Table = () => { tableColumnsMeta, ] ); + const defaultListHeightOffset = getTableUIElementsOffset({ + showSearch, + width: bounds.width, + }); return ( <> @@ -311,7 +331,7 @@ export const Table = () => { /> - {showCompactMobileView ? ( + {showCompactMobileView && compactMobileViewEnabled ? ( /* Compact Mobile View */ { {({ width, height }: { width: number; height: number }) => ( { {({ height }: { height: number }) => (