From 11e1580b829e03a281b0b828570de82ae836299c Mon Sep 17 00:00:00 2001
From: Turtle <turtle1999@deepseek.com>
Date: Wed, 21 Oct 2026 22:45:28 +0800
Subject: [PATCH] fix(ui-conversation): keep the active tab bar visible over
 Trajectory and widen tab targets

Co-authored-by: Shigma <33423008+shigma@users.noreply.github.com>
---
 apps/web/tests/window-drag-coverage.e2e.ts    |  4 +++-
 .../skeleton/ConversationRoot.module.css      | 19 +++++++++++++------
 .../tests/header-styles.client.spec.ts        |  6 ++++--
 .../ui-trajectory/src/client/views.module.css |  6 +++++-
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/web/tests/window-drag-coverage.e2e.ts b/apps/web/tests/window-drag-coverage.e2e.ts
index cb6df06778..142fcb7431 100644
--- a/apps/web/tests/window-drag-coverage.e2e.ts
+++ b/apps/web/tests/window-drag-coverage.e2e.ts
@@ -276,7 +276,9 @@ describe('web e2e: macOS window drag coverage', () => {
         {
           row: 'conversation header',
           what: 'the blank run right of the view tabs, on the tab strip row',
-          at: () => [tabs.x + tabs.width + 8, tabs.y + tabs.height / 2],
+          // The last tab's press target overhangs the tablist by 10px and the
+          // More launcher starts 20px past it; probe the run between them.
+          at: () => [tabs.x + tabs.width + 15, tabs.y + tabs.height / 2],
           drag: true,
         },
         {
diff --git a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
index cf92656162..ae797ac695 100644
--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
@@ -212,12 +212,19 @@
   min-height: 25px;
 }
 
-/* The 16px text line retains 9px below it. The active bar reaches 1px past
-   the tab box to sit over the header rule. */
+/* The 16px text line retains 9px below it. The press target extends 10px
+   above the text into the strip's top margin and 10px to each side, as the
+   Sidebar tab chips do (ui-dockkit `.tab`); negative margins keep the layout
+   at the text box. The active bar spans the text and reaches 1px past the tab
+   box to sit over the header rule. */
 .tab {
+  --dsh-tab-hit-inline: 10px;
+
   position: relative;
-  min-height: 25px;
-  padding: 0 0 9px;
+  box-sizing: border-box;
+  min-height: 35px;
+  margin: -10px calc(-1 * var(--dsh-tab-hit-inline)) 0;
+  padding: 10px var(--dsh-tab-hit-inline) 9px;
   border: none;
   background: transparent;
   font-size: 13px;
@@ -230,9 +237,9 @@
 .tab::after {
   content: '';
   position: absolute;
-  right: 0;
+  right: var(--dsh-tab-hit-inline);
   bottom: -1px;
-  left: 0;
+  left: var(--dsh-tab-hit-inline);
   height: 2px;
   border-radius: 2px;
   background: transparent;
diff --git a/packages/client/ui-conversation/tests/header-styles.client.spec.ts b/packages/client/ui-conversation/tests/header-styles.client.spec.ts
index c3abd2bcf4..3c964950d0 100644
--- a/packages/client/ui-conversation/tests/header-styles.client.spec.ts
+++ b/packages/client/ui-conversation/tests/header-styles.client.spec.ts
@@ -8,8 +8,10 @@ describe('conversation header geometry', () => {
   it('keeps the single-line header at the shared 76px height', () => {
     expect(css.match(/\.header\s*\{([^}]*)\}/)?.[1]).toContain('min-height: 76px')
     expect(css.match(/\.viewTabs\s*\{([^}]*)\}/)?.[1]).toContain('min-height: 25px')
-    expect(css.match(/\.tab\s*\{([^}]*)\}/)?.[1]).toContain('min-height: 25px')
-    expect(css.match(/\.tab\s*\{([^}]*)\}/)?.[1]).toContain('padding: 0 0 9px')
+    // The tab's 35px press target sits 10px above its 25px row through a negative top margin.
+    expect(css.match(/\.tab\s*\{([^}]*)\}/)?.[1]).toContain('min-height: 35px')
+    expect(css.match(/\.tab\s*\{([^}]*)\}/)?.[1]).toContain('margin: -10px calc(-1 * var(--dsh-tab-hit-inline)) 0')
+    expect(css.match(/\.tab\s*\{([^}]*)\}/)?.[1]).toContain('padding: 10px var(--dsh-tab-hit-inline) 9px')
   })
 
   it('uses 32px between view labels without changing the action gap', () => {
diff --git a/packages/client/ui-trajectory/src/client/views.module.css b/packages/client/ui-trajectory/src/client/views.module.css
index 687f4a4657..7915da5cc1 100644
--- a/packages/client/ui-trajectory/src/client/views.module.css
+++ b/packages/client/ui-trajectory/src/client/views.module.css
@@ -1,7 +1,11 @@
-/* Full-bleed, fixed-height host for the trajectory ledger. */
+/* Full-bleed, fixed-height host for the trajectory ledger. Isolation keeps the
+   sticky toolbar's z-index inside this view, so the conversation tab row
+   (ui-conversation `.tabs`, z-index 1) still paints its active bar over the
+   view's top edge. */
 .root {
   --dsh-trajectory-toolbar-height: 32px;
 
+  isolation: isolate;
   display: flex;
   flex-direction: column;
   overflow: hidden;