Repository navigation
[Bug] 工作面板较窄且标签标题较长时，激活标签的关闭按钮被裁出标签条视口，无法看到也无法点击 #1762
Description
问题描述
工作面板标签条在面板较窄 + 标签标题较长时，会把激活标签右侧的关闭按钮推到 strip 的可视区之外裁掉；鼠标悬停标签也不会显示关闭按钮，于是这个标签看上去完全没有关闭入口，只能用中键或键盘 Delete 关闭。
根因是布局裁剪，不是 opacity：
- 标签宽度随标题在 92–180px 之间伸缩：
apps/desktop/src/styles/work-panel.css:212-225 - 标签条是
max-width: 100%; overflow-x: auto：apps/desktop/src/styles/work-panel.css:190-206。面板较窄时（Windows 上头部还有margin-right: var(--ds-window-controls-width)，同文件168-177；再减去+与最大化两个按钮）标签条的可视宽度会小于标签宽度 - 关闭按钮是标签按钮的兄弟节点：
apps/desktop/src/components/workpanel/WorkPanel.tsx:890-899；而“把激活标签滚进视野”滚的是标签按钮本身：WorkPanel.tsx:313-319。按钮可见 ≠ 关闭按钮可见，inline: "nearest"因此一个像素都不会滚 - 标签条的滚动条被隐藏：
work-panel.css:208-210，用户也看不到“还能横向滚”的提示
复现步骤
- 打开一个会话，打开右侧工作面板
- 让某个标签的标题足够长（如文件管理器 / Browser / 长文件名文件），或把面板拖窄，直到标签条小于标签宽度
- 看激活标签右侧：关闭按钮应在的位置是空白，鼠标移上去也不出现
× - 悬停标签本身同样不出现关闭按钮
预期行为
激活标签（以及悬停标签）的关闭按钮始终在标签条内可见、可点。
实际行为
关闭按钮被裁在标签条的滚动视口之外，既不可见也不可点；中键点击标签、标签聚焦后按 Delete/Backspace 仍可关闭。
应用版本
0.21.0-beta.4
操作系统
Windows
其他环境信息
WorkPanel.tsx 与 work-panel.css 与 origin/main（589e5803a）完全一致，不是本地改动引入的。
附加说明：代码量测结果
本次没有启动应用做 UI 实测。用仓库真实样式（tokens.css / base.css / ui-kit.css / chrome.css / work-panel.css）在 Chromium 中复刻 WorkPanel 头部 DOM（header.work-panel-header > .work-panel-tab-strip-wrap > .work-panel-tab-strip > .work-panel-tab.active，data-platform="win32"）后量测：
header content=200px label="文件管理器"（单标签）
strip clientW=119 scrollW=136 scrollLeft=0
tab button rect=22.0..134.0 (scrollIntoView 目标，完全可见: true)
close rect=134.0..158.0 viewportRight=141.0
=> close button clipped by strip viewport: true
即标签按钮刚好可见，关闭按钮那 24px 落在可视区外，而滚动目标是按钮本身，所以不会为它额外滚动。
建议的修复方向：把滚动目标从标签按钮换成包含关闭按钮的元素——先滚整个 .work-panel-tab，再滚它的 .work-panel-tab-close（后者在标签宽于标签条时也能把关闭按钮带回视野）。回归用例可以放在 scripts/e2e/work-panel-drag.tsx：造一个长标题的激活标签 + 窄面板，断言关闭按钮矩形落在 .work-panel-tab-strip 的 client 视口内且 document.elementFromPoint 命中它。
Activity
muzimu217 commentedon Oct 19, 2026
Confirmed the analysis line by line on
main(589e5803a) — every claim holds:WorkPanel.tsx:890-899(the<button className="work-panel-tab-close">sits after</button>of the tab itself).WorkPanel.tsx:313-319(tabButtonRefs.current[activeTabId]?.scrollIntoView({ block: "nearest", inline: "nearest" })). Withinline: "nearest", a tab button already visible scrolls zero pixels — and the sibling close button sitting to its right stays clipped.overflow-x: autowithwidth: max-content; max-width: 100%and a hidden scrollbar:work-panel.css:190-210. Tabs are92–180pxwide (:212-225), so a narrow panel plus long labels does put the right edge outside the viewport.Two things that would make the fix robust rather than a nudge:
scrollIntoViewthat instead — theninline: "nearest"accounts for the close button's width. That is a two-line change at:313-319plus a ref map keyed liketabButtonRefs.scroll-padding-inlinecurrently only reserves 2px (work-panel.css:204). Even with (1), a 1px rounding difference can still clip the last pixel; bumping the end padding to the close button's width (or settingscroll-padding-inline-endfrom a CSS variable shared with the button size) makes the guarantee hold structurally.Optional but worth considering: the report notes the scrollbar is hidden (
::-webkit-scrollbar { display: none }), so when the strip does overflow there is no affordance that more tabs exist. A subtle fade or edge shadow whenscrollWidth > clientWidthwould tell the user to scroll — separate from this bug, but the same narrow-panel scenario.fix(work-panel): keep active tab close action visible
fix(work-panel): keep the active tab's close button inside the strip
fix(work-panel): keep the active tab's close button inside the strip
vastsa commentedon Oct 22, 2026
已通过 PR #1769 合入修复：激活标签的关闭按钮会在标签栏缩窄后重新滚入视口；悬停部分可见的非激活标签时也会显示并滚入关闭按钮。Electron 几何回归覆盖窄屏、同一标签下缩窄到 80px、以及悬停三种状态，并验证按钮位于滚动视口内且命中目标正确。谢谢你提供复现步骤和量测结果。
perf(sessions): cache file-derived session summaries by file identity (…