From d8dfca5f07bf39f4f3f53cb412794bfdcd451a4a Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Thu, 9 Apr 2026 16:29:47 -0700
Subject: [PATCH] fix: prevent tab width shift during auto-save dirty state
 toggle (#427)

Move dirty-dot indicator and close button into a shared fixed-width
container so toggling between dirty/clean states during auto-save
does not cause the tab to resize.
---
 .../src/components/tab-bar/EditorFileTab.tsx  | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/renderer/src/components/tab-bar/EditorFileTab.tsx b/src/renderer/src/components/tab-bar/EditorFileTab.tsx
index f0767e75277..f56d6410c24 100644
--- a/src/renderer/src/components/tab-bar/EditorFileTab.tsx
+++ b/src/renderer/src/components/tab-bar/EditorFileTab.tsx
@@ -123,9 +123,6 @@ export default function EditorFileTab({
               className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
             />
           )}
-          {file.isDirty && (
-            <span className="mr-1 size-1.5 rounded-full bg-foreground/60 shrink-0" />
-          )}
           <span className="mr-1.5 flex min-w-0 items-baseline gap-1.5">
             <span
               className={`truncate max-w-[130px]${file.isPreview ? ' italic' : ''}`}
@@ -142,20 +139,30 @@ export default function EditorFileTab({
               </span>
             )}
           </span>
-          <button
-            className={`flex items-center justify-center w-4 h-4 rounded-sm shrink-0 ${
-              isActive
-                ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                : 'text-transparent group-hover:text-muted-foreground hover:!text-foreground hover:!bg-muted'
-            }`}
-            onPointerDown={(e) => e.stopPropagation()}
-            onClick={(e) => {
-              e.stopPropagation()
-              onClose()
-            }}
-          >
-            <X className="w-3 h-3" />
-          </button>
+          {/* Dirty dot and close button share the same slot to prevent tab width shift during auto-save.
+             When dirty: dot is shown, close button appears on hover (replacing the dot).
+             When clean: close button is shown normally (visible on active tab, on hover for others). */}
+          <div className="relative flex items-center justify-center w-4 h-4 shrink-0">
+            {file.isDirty && (
+              <span className="absolute size-1.5 rounded-full bg-foreground/60 group-hover:hidden" />
+            )}
+            <button
+              className={`flex items-center justify-center w-4 h-4 rounded-sm ${
+                file.isDirty
+                  ? 'hidden group-hover:flex text-muted-foreground hover:text-foreground hover:bg-muted'
+                  : isActive
+                    ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                    : 'text-transparent group-hover:text-muted-foreground hover:!text-foreground hover:!bg-muted'
+              }`}
+              onPointerDown={(e) => e.stopPropagation()}
+              onClick={(e) => {
+                e.stopPropagation()
+                onClose()
+              }}
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
         </div>
       </div>