From 2150443bdaea4e7ca595678ac13825fd671e0e0c Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Fri, 22 May 2026 01:48:26 +0800
Subject: [PATCH] fix(grid): prevent toolbar overlap

---
 apps/desktop/src/components/grid/DataGrid.vue    |  6 +++++-
 packages/app-tests/dataGridToolbarLayout.test.ts | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 packages/app-tests/dataGridToolbarLayout.test.ts

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index f72241e2d4..81ff50b459 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -2969,7 +2969,7 @@ defineExpose({
       <ContextMenuTrigger as-child>
         <div v-if="hasData || canUseWhereSearch" class="flex-1 flex flex-col overflow-hidden">
           <!-- Search bar -->
-          <div class="flex items-stretch border-b shrink-0 bg-muted/20 relative">
+          <div class="data-grid-topbar flex items-stretch border-b shrink-0 bg-muted/20 relative">
             <div
               v-if="useTransaction && editable && (tableMeta || customSave)"
               class="flex items-center px-2 py-0.5 border-r shrink-0"
@@ -4677,6 +4677,10 @@ defineExpose({
 </template>
 
 <style scoped>
+.data-grid-topbar {
+  min-width: 760px;
+}
+
 .data-grid-scroller {
   overflow-anchor: none;
   will-change: scroll-position;
diff --git a/packages/app-tests/dataGridToolbarLayout.test.ts b/packages/app-tests/dataGridToolbarLayout.test.ts
new file mode 100644
index 0000000000..3246f765f7
--- /dev/null
+++ b/packages/app-tests/dataGridToolbarLayout.test.ts
@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+import { strict as assert } from "node:assert";
+import test from "node:test";
+
+const source = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
+
+test("data grid toolbar keeps a minimum content width", () => {
+  assert.match(source, /class="data-grid-topbar flex items-stretch/);
+  assert.match(source, /\.data-grid-topbar\s*\{\s*min-width: 760px;/s);
+});