From 3c4d61339ea84f9ada16b42fcae6470f7a4ac2ec Mon Sep 17 00:00:00 2001
From: Abeautifulsnow <lcprunstone@163.com>
Date: Thu, 3 Sep 2026 12:15:56 +0800
Subject: [PATCH] fix(desktop): let data header name chips flex to content

---
 .../src/components/layout/ContentArea.vue     |  8 +++---
 .../__tests__/ContentArea.dataHeader.spec.ts  | 25 +++++++++++++++++++
 .../app-tests/dataTabHeaderConnection.test.ts |  3 ++-
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts

diff --git a/apps/desktop/src/components/layout/ContentArea.vue b/apps/desktop/src/components/layout/ContentArea.vue
index 35d17dac39..01b88b4b11 100644
--- a/apps/desktop/src/components/layout/ContentArea.vue
+++ b/apps/desktop/src/components/layout/ContentArea.vue
@@ -1904,13 +1904,15 @@ defineExpose({
     <template v-else-if="activeTab.mode === 'data'">
       <div class="flex-1 min-h-0 flex flex-col">
         <div class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-2 text-xs">
-          <span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
+          <!-- No fixed max-w cap on these chips: they must flex (min-w-0 + truncate)
+               so long names only clip when the header row itself runs out of space (#7880). -->
+          <span v-if="activeConnection?.name?.trim()" data-data-header-connection class="inline-flex min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="activeConnection.name">
             {{ activeConnection.name }}
           </span>
-          <span class="inline-flex max-w-48 min-w-0 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium">
+          <span class="inline-flex min-w-0 items-center truncate rounded border border-border bg-muted/50 px-2 py-0.5 font-medium" :title="activeTab.tableMeta?.tableName || activeTab.title">
             {{ activeTab.tableMeta?.tableName || activeTab.title }}
           </span>
-          <span class="inline-flex max-w-56 min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground">
+          <span class="inline-flex min-w-0 items-center truncate rounded border border-border bg-muted/30 px-2 py-0.5 text-muted-foreground" :title="[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')">
             <template v-if="activeTab.tableMeta?.schema">{{ activeTab.tableMeta.schema }}@</template>{{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t) }}
           </span>
           <span v-if="activeTab.mode === 'data' && activeTab.tableMeta" class="inline-flex shrink-0 items-center rounded border border-border bg-muted/30 px-2 py-0.5 font-medium text-muted-foreground tabular-nums"> {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }} </span>
diff --git a/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts b/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts
new file mode 100644
index 0000000000..0a198578cd
--- /dev/null
+++ b/apps/desktop/src/components/layout/__tests__/ContentArea.dataHeader.spec.ts
@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const contentAreaSource = readFileSync(new URL("../ContentArea.vue", import.meta.url), "utf8");
+
+describe("ContentArea data-mode header", () => {
+  it("lets name chips flex to available width and only truncate when the row overflows", () => {
+    const headerIndex = contentAreaSource.indexOf("data-data-header-connection");
+    expect(headerIndex).toBeGreaterThan(-1);
+    const chipsBlock = contentAreaSource.slice(headerIndex, contentAreaSource.indexOf('class="ml-auto"', headerIndex));
+    expect(chipsBlock.length).toBeGreaterThan(0);
+
+    // Fixed max-w-48/max-w-56 caps clipped table names even with plenty of free
+    // space in the header row (#7880); chips must rely on min-w-0 + truncate so
+    // they only clip when the row itself runs out of space.
+    expect(chipsBlock).not.toContain("max-w-48");
+    expect(chipsBlock).not.toContain("max-w-56");
+    expect(chipsBlock).toContain("inline-flex min-w-0 items-center truncate");
+  });
+
+  it("keeps the full table and schema names reachable via title tooltips", () => {
+    expect(contentAreaSource).toContain(':title="activeTab.tableMeta?.tableName || activeTab.title"');
+    expect(contentAreaSource).toContain("[activeTab.tableMeta?.schema, databaseDisplayNameForTab(activeTab.connectionId, activeTab.database, t)].filter(Boolean).join('@')");
+  });
+});
diff --git a/packages/app-tests/dataTabHeaderConnection.test.ts b/packages/app-tests/dataTabHeaderConnection.test.ts
index 93ac45ab78..812ae00271 100644
--- a/packages/app-tests/dataTabHeaderConnection.test.ts
+++ b/packages/app-tests/dataTabHeaderConnection.test.ts
@@ -27,5 +27,6 @@ test("data tab header shows the active connection before the table context", ()
   assert.ok(connectionIndex >= 0 && connectionIndex < tableIndex);
   assert.match(template, /v-if="activeConnection\?\.name\?\.trim\(\)"/);
   assert.match(template, /:title="activeConnection\.name"/);
-  assert.match(template, /data-data-header-connection class="[^"]*max-w-48[^"]*truncate/);
+  assert.doesNotMatch(template, /data-data-header-connection class="[^"]*(?:max-w-4[89]|max-w-5[0-9])/);
+  assert.match(template, /data-data-header-connection class="[^"]*min-w-0[^"]*truncate/);
 });