feat(grid): add autofit-all-columns action to the filter panel

apps/desktop/src/components/grid/DataGrid.vue

@@ -2282,7 +2282,7 @@ function columnWidthDisplayValue(value: CellValue, columnIndex: number): CellVal
   return showWhitespaceEnabled.value && typeof display === "string" ? gridCellDisplayValue(display, flatteningMultiLineEnabled.value, true) : display;
 }
 
-const { initColumnWidths, onResizeStart, autoFitColumn, renderedColumnWidths, totalWidth, columnVars, getIsResizing } = useDataGridColumnResize({
+const { initColumnWidths, onResizeStart, autoFitColumn, autoFitAllColumns, renderedColumnWidths, totalWidth, columnVars, getIsResizing } = useDataGridColumnResize({
   columns: visibleColumns,
   sourceRows: computed(() => props.result.rows),
   columnIndexes: visibleColumnIndexes,
@@ -11524,6 +11524,7 @@ defineExpose({
   hasCustomColumnOrder,
   moveDisplayableColumn,
   resetColumnOrder,
+  autoFitAllColumns,
   nullColumnsHidden,
   allNullColumnCount,
   canToggleAllNullColumns,

apps/desktop/src/components/grid/DataGridColumnLayoutPopover.vue

@@ -368,6 +368,12 @@ onBeforeUnmount(resetColumnDragState);
           {{ t("grid.noSearchResults") }}
         </div>
       </div>
+      <div v-if="grid?.autoFitAllColumns" class="flex items-center justify-between gap-2 border-t bg-muted/30 px-2 py-1.5">
+        <span class="text-[11px] leading-4 text-muted-foreground">{{ t("grid.columnWidth") }}</span>
+        <Button variant="ghost" size="sm" class="h-7 shrink-0 px-2 text-xs" data-column-auto-fit-all :title="t('grid.autoFitColumnWidthsHint')" @click="grid?.autoFitAllColumns?.()">
+          {{ t("grid.autoFitColumnWidths") }}
+        </Button>
+      </div>
       <div class="flex flex-col gap-1 border-t bg-muted/30 px-2 py-1.5">
         <span class="text-[11px] leading-4 text-muted-foreground">
           {{ t("grid.columnVisibilityHint") }}

apps/desktop/src/components/grid/__tests__/dataGridColumnLayoutPopover.spec.ts

@@ -60,6 +60,7 @@ function createGrid(itemCount: number) {
   const options = columnLayoutOptions(itemCount);
   const toggleColumnVisibility = vi.fn();
   const moveDisplayableColumn = vi.fn();
+  const autoFitAllColumns = vi.fn();
   const grid: DataGridColumnLayoutHandle = {
     visibleColumnCount: itemCount,
     displayableColumnCount: itemCount,
@@ -76,10 +77,41 @@ function createGrid(itemCount: number) {
     hasCustomColumnOrder: false,
     moveDisplayableColumn,
     resetColumnOrder: vi.fn(),
+    autoFitAllColumns,
   };
-  return { grid, moveDisplayableColumn, toggleColumnVisibility };
+  return { grid, moveDisplayableColumn, toggleColumnVisibility, autoFitAllColumns };
 }
 
+// https://github.com/t8y2/dbx/issues/9813
+describe("column layout popover auto fit", () => {
+  it("offers an auto fit action that fits every visible column", async () => {
+    const { host, autoFitAllColumns } = await mountPopover(3);
+
+    expect(host.textContent).toContain("Column Width");
+    const autoFitButton = host.querySelector<HTMLButtonElement>("[data-column-auto-fit-all]")!;
+    expect(autoFitButton).not.toBeNull();
+    expect(autoFitButton.textContent?.trim()).toBe("Fit columns to content");
+
+    autoFitButton.click();
+    expect(autoFitAllColumns).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the auto fit action for grids that cannot resize columns", async () => {
+    const gridState = createGrid(2);
+    delete (gridState.grid as { autoFitAllColumns?: unknown }).autoFitAllColumns;
+    const host = document.createElement("div");
+    document.body.append(host);
+    const app = createApp(DataGridColumnLayoutPopover, { grid: gridState.grid });
+    app.use(i18n);
+    app.mount(host);
+    mountedApps.push({ app, host });
+    await nextTick();
+    await nextTick();
+
+    expect(host.querySelector("[data-column-auto-fit-all]")).toBeNull();
+  });
+});
+
 async function mountPopover(itemCount = 4) {
   const gridState = createGrid(itemCount);
   const host = document.createElement("div");

apps/desktop/src/components/grid/dataGridColumnLayoutPopover.ts

@@ -19,6 +19,9 @@ export interface DataGridColumnLayoutHandle {
   hasCustomColumnOrder: boolean;
   moveDisplayableColumn: (fromDisplayableIndex: number, toDisplayableIndex: number) => void;
   resetColumnOrder: () => void;
+  /** Fit every visible column to its content (#9813). Optional so grids that
+   *  only expose the visibility/order surface keep working. */
+  autoFitAllColumns?: () => void;
 }
 
 export interface DataGridColumnLayoutVirtualWindow {