From b5db4fc65e6f42a010192b9200105a548fa2a08f Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 24 Oct 2024 15:42:33 +0200 Subject: [PATCH 1/5] style: Do not wrap header labels --- app/charts/table/table-content.tsx | 1 + 1 file changed, 1 insertion(+) 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", From 75add5f89c51452bead2dd4c932643f9ad98a3ce Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 24 Oct 2024 15:42:53 +0200 Subject: [PATCH 2/5] style: Make use of full width --- app/charts/table/table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx index aa3077a1e..38eb7cbca 100644 --- a/app/charts/table/table.tsx +++ b/app/charts/table/table.tsx @@ -211,7 +211,7 @@ export const Table = () => { style: { ...style, flexDirection: "column", - width: "max-content", + width: "100%", }, })} > From 3b81ad16cfab674f6e3ec912419818023573a28c Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 24 Oct 2024 15:43:42 +0200 Subject: [PATCH 3/5] fix: Table chart height --- app/charts/table/table-state.tsx | 14 ++++++++++++-- app/charts/table/table.tsx | 17 ++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx index 7f673c013..82d14b6b7 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 { shouldShowCompactMobileView } from "@/charts/table/table"; import { TableStateVariables, useTableStateData, @@ -128,9 +129,18 @@ 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 + + (settings.showSearch ? 48 : 0) + + (shouldShowCompactMobileView(width) ? 48 : 0); const bounds = { width, height, diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx index 38eb7cbca..47ba9beb7 100644 --- a/app/charts/table/table.tsx +++ b/app/charts/table/table.tsx @@ -62,6 +62,10 @@ const useStyles = makeStyles(() => { }; }); +export const shouldShowCompactMobileView = (width: number) => { + return width < MOBILE_VIEW_THRESHOLD; +}; + export const Table = () => { const { bounds, @@ -78,8 +82,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(""); @@ -281,6 +284,9 @@ export const Table = () => { tableColumnsMeta, ] ); + // Make sure we don't cut the table off by having other UI elements enabled + const defaultListHeightOffset = + (showSearch ? 48 : 0) + (showCompactMobileView ? 48 : 0) + 4; return ( <> @@ -311,7 +317,7 @@ export const Table = () => { /> - {showCompactMobileView ? ( + {showCompactMobileView && compactMobileViewEnabled ? ( /* Compact Mobile View */ { {({ width, height }: { width: number; height: number }) => ( { {({ height }: { height: number }) => ( Date: Thu, 24 Oct 2024 15:52:08 +0200 Subject: [PATCH 4/5] refactor: Share logic --- app/charts/table/table-state.tsx | 5 ++--- app/charts/table/table.tsx | 22 ++++++++++++++++++---- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/app/charts/table/table-state.tsx b/app/charts/table/table-state.tsx index 82d14b6b7..246b33f5a 100644 --- a/app/charts/table/table-state.tsx +++ b/app/charts/table/table-state.tsx @@ -25,7 +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 { shouldShowCompactMobileView } from "@/charts/table/table"; +import { getTableUIElementsOffset } from "@/charts/table/table"; import { TableStateVariables, useTableStateData, @@ -139,8 +139,7 @@ const useTableState = ( chartHeight + margins.top + margins.bottom + - (settings.showSearch ? 48 : 0) + - (shouldShowCompactMobileView(width) ? 48 : 0); + getTableUIElementsOffset({ showSearch: settings.showSearch, width }); const bounds = { width, height, diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx index 47ba9beb7..111036844 100644 --- a/app/charts/table/table.tsx +++ b/app/charts/table/table.tsx @@ -62,10 +62,23 @@ const useStyles = makeStyles(() => { }; }); -export const shouldShowCompactMobileView = (width: number) => { +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, @@ -284,9 +297,10 @@ export const Table = () => { tableColumnsMeta, ] ); - // Make sure we don't cut the table off by having other UI elements enabled - const defaultListHeightOffset = - (showSearch ? 48 : 0) + (showCompactMobileView ? 48 : 0) + 4; + const defaultListHeightOffset = getTableUIElementsOffset({ + showSearch, + width: bounds.width, + }); return ( <> From 7f2cd12461107d38d340cfe842f9d50184fbe045 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 24 Oct 2024 16:00:10 +0200 Subject: [PATCH 5/5] docs: Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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