From b1023b87e7d6aa7205f31d65b2ffce7e91392366 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Mon, 24 Aug 2026 20:16:06 +0300
Subject: [PATCH] fix(header): tab title fade is resting-state only; clearer
 separators

The title fade no longer sits on controls: it lifts while the tab is
hovered or its controls/menu are open (hard clip instead) and is not
applied at all while the active tab renames. The active tab clips its
title instead of showing an ellipsis, matching inactive tabs. Tab
separators drop the extra transparency that made them nearly
invisible.
---
 packages/ui/src/components/layout/Header.tsx          |  2 +-
 .../ui/src/components/layout/SessionTabsStrip.tsx     |  9 +++++++--
 packages/ui/src/index.css                             | 11 +++++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index 8ab2bc69..c7000a9d 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -1855,7 +1855,7 @@ export const Header: React.FC = () => {
                   </button>
                 </form>
               ) : (
-                <span className="truncate text-[13px] font-medium leading-4 text-foreground max-w-full">
+                <span className="block overflow-hidden whitespace-nowrap text-[13px] font-medium leading-4 text-foreground max-w-full">
                   {isNewSessionDraftOpen ? t('sessions.switcher.draftTitle') : currentSessionTitle}
                 </span>
               )}
diff --git a/packages/ui/src/components/layout/SessionTabsStrip.tsx b/packages/ui/src/components/layout/SessionTabsStrip.tsx
index a701774c..45018366 100644
--- a/packages/ui/src/components/layout/SessionTabsStrip.tsx
+++ b/packages/ui/src/components/layout/SessionTabsStrip.tsx
@@ -219,8 +219,9 @@ const SessionTabItem: React.FC<{
                       onClose(tab.id);
                     }
                   }}
+                  data-controls-open={overlayVisible ? 'true' : 'false'}
                   className={cn(
-                    'group/session-tab relative flex h-7 w-full min-w-0 select-none items-center rounded-md px-2',
+                    'session-tab group/session-tab relative flex h-7 w-full min-w-0 select-none items-center rounded-md px-2',
                     isActive
                       ? 'bg-interactive-selection'
                       : cn(
@@ -235,7 +236,11 @@ const SessionTabItem: React.FC<{
                     overlayVisible && 'pr-10',
                   )}
                   >
-                    <div className="session-tab-title min-w-0 flex-1 overflow-hidden whitespace-nowrap">
+                    <div className={cn(
+                      'min-w-0 flex-1 overflow-hidden whitespace-nowrap',
+                      !suppressControls && 'session-tab-title',
+                    )}
+                    >
                       {isActive ? children : (
                         <span className="text-[13px] font-medium leading-4">{title}</span>
                       )}
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index 67f694ec..ed6c021f 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1804,7 +1804,6 @@ html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
   height: 12px;
   border-radius: 9999px;
   background: var(--border);
-  opacity: 0.6;
 }
 .session-tab-slot[data-active='true'] + .session-tab-slot::before,
 .session-tab-slot:not([data-active='true']):hover::before,
@@ -1826,8 +1825,16 @@ html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
 
 /* Session tab titles: fade out instead of "..." — the ellipsis reads as
    clutter next to the tab's status dot and hover controls. Short titles
-   never reach the fade zone (the span spans the tab, not the text). */
+   never reach the fade zone (the span spans the tab, not the text). The
+   fade belongs to the resting state only: while the tab is hovered or its
+   controls are open, the title clips hard so the smear never sits next to
+   the menu/close/rename controls. */
 .session-tab-title {
   -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
   mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
 }
+.session-tab:hover .session-tab-title,
+.session-tab[data-controls-open='true'] .session-tab-title {
+  -webkit-mask-image: none;
+  mask-image: none;
+}