From be5f0c3cee89f7db4ee3f7f6522d6ecb21d00785 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 12 Apr 2026 22:54:41 -0700
Subject: [PATCH] fix: improve title bar agent label spacing (#575)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* fix: improve title bar agent label spacing when sidebar collapsed

- Move overflow-hidden to only apply when sidebar is open
- Apply shrink-0 and mr-2 in collapsed state to prevent squeezing and add gap
- Remove "active" label from agent badge for cleaner appearance
- Update comment explaining collapsed sidebar behavior

* fix: add max-lines disable to worktrees.test.ts

Pre-existing lint issue — file grew past 300-line limit on main.
---
 src/renderer/src/App.tsx                        | 7 ++++---
 src/renderer/src/store/slices/worktrees.test.ts | 9 +++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 2681caf8915..7c5e6932624 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -514,9 +514,11 @@ function App(): React.JSX.Element {
         <div className="titlebar">
           {/* Why: the left section of the titlebar matches the sidebar width so
               tabs start exactly where the sidebar ends, creating a clean vertical
-              alignment between the sidebar edge and the first tab. */}
+              alignment between the sidebar edge and the first tab. When the
+              sidebar is collapsed, shrink-0 prevents the flex-1 tab section from
+              squeezing this area, and mr-2 adds a gap before the first tab. */}
           <div
-            className={`flex items-center overflow-hidden${showSidebar && sidebarOpen ? ' shrink-0' : ' min-w-0'}`}
+            className={`flex items-center${showSidebar && sidebarOpen ? ' overflow-hidden shrink-0' : ' shrink-0 mr-2'}`}
             style={{ width: showSidebar && sidebarOpen ? sidebarWidth : undefined }}
           >
             <div className={isMac && !isFullScreen ? 'titlebar-traffic-light-pad' : 'pl-2'} />
@@ -551,7 +553,6 @@ function App(): React.JSX.Element {
                       aria-hidden
                     />
                     <span className="titlebar-agent-badge-count">{activeAgentCount}</span>
-                    <span className="titlebar-agent-badge-label">active</span>
                   </span>
                 </HoverCardTrigger>
                 <HoverCardContent side="bottom" sideOffset={6} className="titlebar-agent-hovercard">
diff --git a/src/renderer/src/store/slices/worktrees.test.ts b/src/renderer/src/store/slices/worktrees.test.ts
index cdffd5b180e..131bb7ba4cf 100644
--- a/src/renderer/src/store/slices/worktrees.test.ts
+++ b/src/renderer/src/store/slices/worktrees.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { create } from 'zustand'
 import type { AppState } from '../types'
@@ -265,8 +266,12 @@ describe('removeWorktree state cleanup', () => {
         'repo1::/path/wt2': [{ id: 'tab-2', worktreeId: 'repo1::/path/wt2' }]
       },
       groupsByWorktree: {
-        'repo1::/path/wt1': [{ id: 'group-1', worktreeId: 'repo1::/path/wt1', activeTabId: 'tab-1' }],
-        'repo1::/path/wt2': [{ id: 'group-2', worktreeId: 'repo1::/path/wt2', activeTabId: 'tab-2' }]
+        'repo1::/path/wt1': [
+          { id: 'group-1', worktreeId: 'repo1::/path/wt1', activeTabId: 'tab-1' }
+        ],
+        'repo1::/path/wt2': [
+          { id: 'group-2', worktreeId: 'repo1::/path/wt2', activeTabId: 'tab-2' }
+        ]
       },
       activeGroupIdByWorktree: {
         'repo1::/path/wt1': 'group-1',