diff --git a/packages/widgets/src/common/homarr-data-table.css b/packages/widgets/src/common/homarr-data-table.css index 90e42b3f5..2531755dd 100644 --- a/packages/widgets/src/common/homarr-data-table.css +++ b/packages/widgets/src/common/homarr-data-table.css @@ -15,6 +15,7 @@ .homarr-data-table .mantine-datatable-table { width: 100% !important; max-width: 100%; + min-width: var(--homarr-table-min-width, 0); table-layout: fixed !important; } diff --git a/packages/widgets/src/common/homarr-data-table.tsx b/packages/widgets/src/common/homarr-data-table.tsx index 5d1b36ad9..2aeda2f7d 100644 --- a/packages/widgets/src/common/homarr-data-table.tsx +++ b/packages/widgets/src/common/homarr-data-table.tsx @@ -25,12 +25,14 @@ type HomarrDataTableProps = DataTableProps & { isEditMode: boolean; cellPadding: string; rowCursor?: "auto" | "default"; + preserveColumnWidths?: boolean; }; export function HomarrDataTable({ isEditMode, cellPadding, rowCursor = "auto", + preserveColumnWidths = false, className, columns, defaultColumnProps, @@ -132,6 +134,15 @@ export function HomarrDataTable({ }); }, [cellPadding, columns, defaultColumnProps?.cellsStyle, resizePreviewWidths]); + const minimumTableWidth = useMemo(() => { + if (!preserveColumnWidths) return undefined; + const totalWidth = columns + .filter(({ hidden }) => !hidden) + .reduce((total, column) => total + getColumnWidth(column.width), 0); + // Keep the minimum readable in displayed pixels when the board canvas is zoomed. + return `calc(${totalWidth}px * var(--board-canvas-inverse-scale, 1))`; + }, [columns, preserveColumnWidths]); + return ( withTableBorder={false} @@ -147,7 +158,7 @@ export function HomarrDataTable({ columns={fittedColumns} onMouseDownCapture={handleMouseDownCapture} className={mergedClassName} - style={[{ pointerEvents: isEditMode ? "none" : undefined }, style]} + style={[{ pointerEvents: isEditMode ? "none" : undefined, "--homarr-table-min-width": minimumTableWidth }, style]} defaultColumnProps={{ ...defaultColumnProps, noWrap: defaultColumnProps?.noWrap ?? true, diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx index 8c20aa2ac..956ec8892 100644 --- a/packages/widgets/src/docker/component.tsx +++ b/packages/widgets/src/docker/component.tsx @@ -425,6 +425,7 @@ export default function DockerWidget({