From ff75ff2a18273ceb3192c89751ebc65254aab3f1 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Fri, 4 Sep 2026 13:02:01 -0500
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20closeable=20tab=20labels=20clip?=
 =?UTF-8?q?=20so=20the=20=E2=9C=95=20fade=20has=20text=20to=20dissolve?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The label span used `truncate`, whose ellipsis stops the text ~8px short
of the overlay. The hover gradient then faded over empty tab surface —
surface to the same surface, invisible by construction — and the ✕ read
as floating in a gap beside three dots.

A closeable tab publishes `data-closeable`; the label reads it via
`group-data-[closeable]/tab:text-clip` so overflow runs under the fade
and the gradient dissolves real letterforms. Vertical rails and
uncloseable tabs have no ✕, so they keep the ellipsis.
---
 apps/desktop/src/components/ui/pane-tab.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/ui/pane-tab.tsx b/apps/desktop/src/components/ui/pane-tab.tsx
index d7b4a967bc..5eb64e4e02 100644
--- a/apps/desktop/src/components/ui/pane-tab.tsx
+++ b/apps/desktop/src/components/ui/pane-tab.tsx
@@ -116,6 +116,7 @@ export const PaneTab = React.forwardRef<HTMLDivElement, PaneTabProps>(function P
         className
       )}
       data-active={active}
+      data-closeable={(onClose && !vertical) || undefined}
       data-selected={selected || undefined}
       data-vertical={vertical || undefined}
       onClickCapture={event => {
@@ -218,7 +219,9 @@ interface PaneTabLabelProps extends React.ComponentProps<'button'> {
 }
 
 /** Truncating label inside a `PaneTab`. `className` merges into the text span
- *  (e.g. `normal-case tracking-normal` for filenames). */
+ *  (e.g. `normal-case tracking-normal` for filenames). On a closeable tab the
+ *  text clips instead of ellipsizing, so it runs under the hover ✕ fade rather
+ *  than stopping short of it with dots. */
 export const PaneTabLabel = React.forwardRef<HTMLElement, PaneTabLabelProps>(function PaneTabLabel(
   { as = 'span', className, children, ...props },
   ref
@@ -231,7 +234,12 @@ export const PaneTabLabel = React.forwardRef<HTMLElement, PaneTabLabelProps>(fun
       ref={ref}
       {...props}
     >
-      <span className={cn('block min-w-0 truncate text-[9px] font-medium tracking-wide uppercase', className)}>
+      <span
+        className={cn(
+          'block min-w-0 truncate text-[9px] font-medium tracking-wide uppercase group-data-[closeable]/tab:text-clip',
+          className
+        )}
+      >
         {children}
       </span>
     </Comp>