starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-09-22 16:02:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent tab width shift during auto-save dirty state toggle (#427)

Browse Source 
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.
This commit is contained in:
Jinjing
2026-04-09 16:29:47 -07:00
committed by GitHub
parent c908bdfbb2
commit d8dfca5f07
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/tab-bar/EditorFileTab.tsx
+24 -17
View File
@@ -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>