From 7fd4aef060d8b2fb9083d2d33f00156f6f709da1 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Wed, 5 Aug 2026 14:52:18 +0800
Subject: [PATCH] fix(grid): optimize data filter control width

---
 .../src/components/grid/DataGridFilterBuilder.vue        | 2 +-
 .../src/components/grid/DataGridQueryControls.vue        | 2 +-
 .../components/grid/__tests__/DataGridSurfaces.spec.ts   | 9 +++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGridFilterBuilder.vue b/apps/desktop/src/components/grid/DataGridFilterBuilder.vue
index 437fae0ea5..fc2f8aa6aa 100644
--- a/apps/desktop/src/components/grid/DataGridFilterBuilder.vue
+++ b/apps/desktop/src/components/grid/DataGridFilterBuilder.vue
@@ -263,7 +263,7 @@ function blurValueRule(id: string) {
         <div v-if="index > 0" class="flex justify-center">
           <Button variant="ghost" size="sm" class="h-6 px-2 text-[11px]" @click="emit('updateRule', rule.id, { conjunction: rule.conjunction === 'AND' ? 'OR' : 'AND' })">{{ rule.conjunction }}</Button>
         </div>
-        <div :ref="(element) => setFilterRuleElement(rule.id, element)" class="grid items-center gap-2" :class="usesExpandedLayout(rule.mode) ? 'grid-cols-[minmax(0,1fr)_80px_auto]' : 'grid-cols-[minmax(0,1fr)_80px_minmax(0,1fr)_auto]'">
+        <div :ref="(element) => setFilterRuleElement(rule.id, element)" class="grid items-center justify-start gap-2" :class="usesExpandedLayout(rule.mode) ? 'grid-cols-[minmax(0,260px)_88px_auto]' : 'grid-cols-[minmax(0,210px)_88px_minmax(0,210px)_auto]'">
           <Select :model-value="rule.columnName" :open="openColumnSelectIds.has(rule.id)" :disabled="rule.disabled" @update:model-value="(value: any) => updateRuleColumn(rule, value)" @update:open="(open: boolean) => handleColumnSelectOpen(rule, open)">
             <SelectTrigger class="h-8 w-full min-w-0 overflow-hidden text-xs [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate">
               <SelectValue v-if="rule.columnName">{{ rule.columnName }}</SelectValue>
diff --git a/apps/desktop/src/components/grid/DataGridQueryControls.vue b/apps/desktop/src/components/grid/DataGridQueryControls.vue
index 4b71b8c93b..830ac3aa1d 100644
--- a/apps/desktop/src/components/grid/DataGridQueryControls.vue
+++ b/apps/desktop/src/components/grid/DataGridQueryControls.vue
@@ -131,7 +131,7 @@ onUnmounted(onResizeEnd);
             <span v-if="filterButtonCount" class="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-1 text-[9px] leading-none text-primary-foreground">{{ filterButtonCount }}</span>
           </button>
         </PopoverTrigger>
-        <PopoverContent align="start" class="w-[480px] max-w-[calc(100vw-24px)] gap-3 p-3">
+        <PopoverContent align="start" class="w-[624px] max-w-[calc(100vw-24px)] gap-3 p-3">
           <div class="flex items-center justify-between gap-3">
             <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
             <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="emit('clearFilters')"><Trash2 class="mr-1 h-3.5 w-3.5" />{{ t("grid.clearFilter") }}</Button>
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
index e61fc5311e..4eb2629e44 100644
--- a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
+++ b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
@@ -344,7 +344,7 @@ describe("DataGridColumnHeader", () => {
 });
 
 describe("DataGridFilterBuilder", () => {
-  it("clips long selected values inside the filter grid", () => {
+  it("keeps selected columns and values readable without stretching the controls", () => {
     const mounted = mountComponent(DataGridFilterBuilder, {
       rules: [{ id: "r1", columnName: "appointmentStatusWithAnExceptionallyLongName", mode: "equals", rawValue: "", rawEndValue: "", conjunction: "AND" }],
       columns: ["appointmentStatusWithAnExceptionallyLongName", "name"],
@@ -357,7 +357,7 @@ describe("DataGridFilterBuilder", () => {
     const triggers = findAll(mounted.root, (node) => node.props["data-stub"] === "SelectTrigger");
     const selectValues = findAll(mounted.root, (node) => node.props["data-stub"] === "SelectValue");
     const items = findAll(mounted.root, (node) => node.props["data-stub"] === "SelectItem");
-    const ruleGrid = findOne(mounted.root, (node) => String(node.props.class).includes("grid-cols-[minmax(0,1fr)_80px_minmax(0,1fr)_auto]"));
+    const ruleGrid = findOne(mounted.root, (node) => String(node.props.class).includes("grid-cols-[minmax(0,210px)_88px_minmax(0,210px)_auto]"));
     const searchInput = findOne(mounted.root, (node) => node.type === "input" && node.props.placeholder === "grid.filterBuilderSearchColumns");
     const valueEditor = findOne(mounted.root, (node) => node.props["data-filter-value-editor"] === "");
 
@@ -371,7 +371,8 @@ describe("DataGridFilterBuilder", () => {
     expect(items.every((item) => String(item.props.class).includes("rounded-none"))).toBe(true);
     expect(searchInput.props.placeholder).toBe("grid.filterBuilderSearchColumns");
     expect(valueEditor.props.placeholder).toBe("grid.filterBuilderValue");
-    expect(String(ruleGrid.props.class)).toContain("grid-cols-[minmax(0,1fr)_80px_minmax(0,1fr)_auto]");
+    expect(String(ruleGrid.props.class)).toContain("grid-cols-[minmax(0,210px)_88px_minmax(0,210px)_auto]");
+    expect(String(ruleGrid.props.class)).toContain("justify-start");
     for (const trigger of triggers) {
       expect(String(trigger.props.class)).toContain("w-full");
       expect(String(trigger.props.class)).toContain("overflow-hidden");
@@ -598,7 +599,7 @@ describe("DataGridQueryControls", () => {
     });
     const popoverContent = findOne(mounted.root, (node) => node.props["data-stub"] === "PopoverContent");
 
-    expect(String(popoverContent.props.class)).toContain("w-[480px]");
+    expect(String(popoverContent.props.class)).toContain("w-[624px]");
     expect(String(popoverContent.props.class)).toContain("max-w-[calc(100vw-24px)]");
   });