From 4b95a874e3dd60ce3e1d0baa8607d474f86f9fa1 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 21 Jul 2026 16:38:02 +0800
Subject: [PATCH] fix(tabs): contain unsaved changes dialog content

---
 .../src/components/layout/AppTabBar.vue       |  9 +++++----
 .../layout/__tests__/AppTabBar.spec.ts        | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts

diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index 1d06dfc1a..2227501be 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -915,15 +915,16 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
       }
     "
   >
-    <DialogContent class="sm:max-w-md">
+    <DialogContent class="min-w-0 sm:max-w-md">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <AlertTriangle class="h-5 w-5 text-amber-500" />
           {{ t("editor.unsavedChangesTitle") }}
         </DialogTitle>
       </DialogHeader>
-      <div class="space-y-2">
-        <p class="text-sm text-muted-foreground">{{ closeConfirmMessage }}</p>
+      <!-- Grid items use min-content sizing by default; shrink and wrap long file paths before they can displace the footer actions. -->
+      <div class="min-w-0 space-y-2">
+        <p class="wrap-anywhere text-sm text-muted-foreground">{{ closeConfirmMessage }}</p>
         <Popover v-if="showCloseConfirmBulkActions" :open="closeConfirmListOpen" @update:open="closeConfirmListOpen = $event">
           <PopoverTrigger as-child>
             <button
@@ -948,7 +949,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
           </PopoverContent>
         </Popover>
       </div>
-      <DialogFooter>
+      <DialogFooter class="min-w-0 sm:flex-wrap">
         <Button variant="outline" @click="handleCancelClose">{{ t("common.cancel") }}</Button>
         <Button v-if="showCloseConfirmBulkActions" variant="secondary" @click="handleDiscardAllAndClose">{{ t("editor.discardAllChanges") }}</Button>
         <Button v-if="showCloseConfirmBulkActions" @click="handleSaveAllAndClose">{{ t("editor.saveAllChanges") }}</Button>
diff --git a/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts b/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts
new file mode 100644
index 000000000..2d30ba14d
--- /dev/null
+++ b/apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts
@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const tabBarSource = readFileSync(new URL("../AppTabBar.vue", import.meta.url), "utf8");
+
+describe("AppTabBar close confirmation layout", () => {
+  it("allows long unbroken tab titles to shrink and wrap inside the dialog", () => {
+    expect(tabBarSource).toMatch(/<DialogContent class="[^"]*\bmin-w-0\b[^"]*\bsm:max-w-md\b/);
+    expect(tabBarSource).toMatch(/<div class="[^"]*\bmin-w-0\b[^"]*\bspace-y-2\b">\s*<p class="[^"]*\bwrap-anywhere\b/);
+  });
+
+  it("keeps all single and bulk close actions while allowing the footer to wrap", () => {
+    expect(tabBarSource).toMatch(/<DialogFooter class="[^"]*\bmin-w-0\b[^"]*\bsm:flex-wrap\b">/);
+    expect(tabBarSource).toContain('v-if="showCloseConfirmBulkActions" variant="secondary" @click="handleDiscardAllAndClose"');
+    expect(tabBarSource).toContain('v-if="showCloseConfirmBulkActions" @click="handleSaveAllAndClose"');
+    expect(tabBarSource).toContain('@click="handleDiscardAndClose"');
+    expect(tabBarSource).toContain('@click="handleSaveAndClose"');
+    expect(tabBarSource).toContain('@click="handleCancelClose"');
+  });
+});