From 38a3dbb4c4df9d6fd3b65c166dc2e3e7a7df183b Mon Sep 17 00:00:00 2001 From: Kit Langton Date: Tue, 28 Jul 2026 19:38:28 -0400 Subject: [PATCH] fix(tui): fade full-width tab titles (#39409) --- packages/tui/src/component/session-tabs.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/tui/src/component/session-tabs.tsx b/packages/tui/src/component/session-tabs.tsx index 4d6c561058..622321ad29 100644 --- a/packages/tui/src/component/session-tabs.tsx +++ b/packages/tui/src/component/session-tabs.tsx @@ -7,6 +7,7 @@ import { useTheme, useThemes } from "../context/theme" import { adaptiveSessionTabLayout, sessionTabComplete, SESSION_TAB_OVERFLOW_WIDTH } from "../context/session-tabs-model" import { createAnimatable, spring } from "../ui/animation" import { Locale } from "../util/locale" +import { stringWidth } from "../util/string-width" import { TabPulse } from "./tab-pulse" import { tint } from "../theme/color" @@ -138,7 +139,9 @@ export function SessionTabs() { const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle())) const fadeWidth = () => (hovered() === tab.sessionID ? 6 : 4) const fadedTitleParts = createMemo(() => visibleTitleParts().slice(-fadeWidth())) - const titleFades = createMemo(() => visibleTitle() !== title() && availableTitleWidth() > fadeWidth()) + const titleFades = createMemo( + () => stringWidth(title()) >= availableTitleWidth() && availableTitleWidth() > fadeWidth(), + ) const foreground = () => { if (hovered() === tab.sessionID) return theme.text.default return tint(theme.text.subdued, theme.text.default, selection())