fix(widgets): allow narrow Docker and downloads tables to scroll (#7067)

Related to #7058. Preserve readable table column widths and enable horizontal scrolling in narrow Docker and Downloads widgets.

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;
 }
 

packages/widgets/src/common/homarr-data-table.tsx

@@ -25,12 +25,14 @@ type HomarrDataTableProps<T> = DataTableProps<T> & {
   isEditMode: boolean;
   cellPadding: string;
   rowCursor?: "auto" | "default";
+  preserveColumnWidths?: boolean;
 };
 
 export function HomarrDataTable<T>({
   isEditMode,
   cellPadding,
   rowCursor = "auto",
+  preserveColumnWidths = false,
   className,
   columns,
   defaultColumnProps,
@@ -132,6 +134,15 @@ export function HomarrDataTable<T>({
     });
   }, [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 (
     <DataTable<T>
       withTableBorder={false}
@@ -147,7 +158,7 @@ export function HomarrDataTable<T>({
       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,

packages/widgets/src/docker/component.tsx

@@ -425,6 +425,7 @@ export default function DockerWidget({
     <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
       <Box style={{ flex: 1, minHeight: 0 }}>
         <HomarrDataTable
+          preserveColumnWidths
           isEditMode={isEditMode}
           cellPadding={isAdvanced || width < 400 ? "2px 8px" : "4px 8px"}
           className="docker-table"

packages/widgets/src/downloads/component.tsx

@@ -783,6 +783,7 @@ export default function DownloadClientsWidget({
           {queryIndicators}
         </Box>
         <HomarrDataTable
+          preserveColumnWidths
           isEditMode={isEditMode}
           cellPadding={`${size.cellPadding}px 8px`}
           fetching={isFetching && (currentItems?.length ?? 0) === 0}