fix(desktop): preserve workbar tab scrollbar behavior

[colaforniaw]

Summary

The app's global scrollbar default was a * rule in layer(components). A universal selector is an element-level declaration, so it competes by cascade layer — and components out-ranks astryx-components. That silently overrode the scrollbar-width: none Astryx's TabList sets on its overflow strip, re-showing a persistent bar under the Session Workbar tabs and nudging them off vertical center (a classic bar takes layout height).

Keep the universal scrollbar default, because scrollbar-width is not inherited and nested app scrollports must remain thin, but move the standard properties and the existing WebKit capsule recipe into the existing @layer base block in maka-tokens.css. The later Astryx and product component layers can then own exceptions on their elements: the TabList strip's none wins while ordinary nested scrollports retain the app-wide thin default. Keeping the WebKit rules preserves the established capsule thumb, transparent gutter, and hover treatment; this PR changes their cascade layer, not the app's scrollbar visual baseline.

Refs #2538

Verification

• npm run lint, npm run format:check, npm --workspace @maka/desktop run typecheck, npm --workspace @maka/desktop run check:architecture, and npm run check:asf-headers pass.
• The Storybook build and targeted workbar smoke pass. The story asserts both sides of the ownership contract: the TabList overflow strip resolves to scrollbar-width: none, while an ordinary nested review scrollport resolves to thin.
• Moving the universal rule back into layer(components) makes the TabList assertion fail (expected 'thin' to be 'none'), so the original regression cannot return silently.
• product-shell-official-appshell--tail-prefetches-history-until-the-band-is-full fails in the same full-smoke run on this branch and on the base commit (pre-existing, unrelated).

AI use

Select exactly one:

• No generative tool made a substantive contribution
• Generative tooling made a substantive contribution

Tool(s) and scope: Maka — root-caused the regression, wrote the fix and the story assertion, and drafted this description.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[me2seeks]

PR 5204 Review

结论

CHANGES_REQUESTED
层机制修复本身正确且最小：把 universal scrollbar-width/scrollbar-color 从 layer(components)（base.css 经 styles.css:35 以 layer(components) 导入）移入 @layer base（maka-tokens.css:1228，cascade-layers.css:65 声明 base < astryx-components < components），Astryx TabList 的 scrollbar-width: none 因此重新胜出；story 测试同时断言两侧（strip=none、review panel=thin），契约完整。

发现

[P2] 同一 diff 里还删掉了整套 webkit 胶囊滚动条样式（33 行），但 PR 描述完全未提，这是全 app 的视觉变化

• 文件: apps/desktop/src/renderer/styles/base.css（删除的 *::-webkit-scrollbar* 5 条规则）
• 问题：删除的注释写明"Both reference systems converged on the same recipe: a slim pill inset in a transparent gutter"——即胶囊 thumb 是有意的设计基线。而 Desktop 渲染器是 Electron（Chromium），所有平台用户的滚动条都会从自定义胶囊回退到 UA 默认细条（scrollbar-color 在 Chromium 下仍着色，但 2px 内缩胶囊 + hover 加深消失）。这不是修 bug 所必需：TabList 复现条的问题是 scrollbar-width 的层冲突，把 webkit 规则一并移入 @layer base 就能同时保住两者；当前是"移了 width/color、删了 webkit"，新旧行为不一致。
• 建议（二选一，请在 PR 中说明决策）：
  1. 恢复 5 条 webkit 规则，与 scrollbar-width/scrollbar-color 一起放进 @layer base（保设计基线，改动同样最小）；或
  2. 确认胶囊样式是有意退役——那请更新 PR 描述（当前只说"move it into @layer base"和"remove the old :root workaround"，未提 webkit 规则删除），并确认 Storybook 视觉基线已更新。

[P3] 描述里"remove the old :root workaround so the default has one owner"指向的规则在本 diff 和当前树上都不存在

• 文件: PR 描述 / apps/desktop/src/renderer/styles/base.css
• 问题：全仓库 grep 不到任何 :root + scrollbar 的规则（diff 前后都没有）。这句话可能是相对更早 base 写的过时描述，或在描述另一个已被合入的改动。
• 建议：把这句改成实际发生的事（若 P2 选方案 2，正好并入 webkit 退役的说明）。

验证

• 层序：cascade-layers.css:65 @layer reset, theme, base, astryx-components, astryx-tokens, components; → base 低于 astryx-components/components，新默认让位成立。
• 例外规则全部保赢：prompt-rail.css:66（none）、workhub.css:253/257、composer.css:540、terminal.css:48、runtime-host.css:75 都在 layer(components) 或无层（无层恒胜层），不会被 base 默认覆盖。
• 修复面：base.css 经 styles.css:35 以 layer(components) 导入，正是原 bug 中 out-rank astryx-components 的来源；移入 base 后该冲突消除。
• story 测试：play 中 within/waitFor/expect 均来自已导入的 storybook/test（:22）；断言 strip 的 scrollbarWidth === 'none' 与 review panel 的 'thin'，双向覆盖。
• 无残留：renderer 下唯一幸存的 webkit 规则是 prompt-rail.css:67（width: 0，与本 PR 无关且保赢）。

[colaforniaw]

Addressed:

• Restored the WebKit capsule scrollbar styles.
• Moved them with the standard scrollbar rules into @layer base.
• Updated the PR description and removed the outdated :root wording.

Lint, format, typecheck, Storybook build, and the targeted smoke all pass. The story still verifies strip=none and review panel=thin.

[me2seeks]

This change correctly restores the intended cascade boundary for the global scrollbar default. The standard properties and WebKit capsule recipe now share the lower base layer, so Astryx and product components can own element-level exceptions. The Session Workbar TabList therefore keeps its intentional scrollbar-width: none, while ordinary nested scrollports retain the app-wide thin default.

I verified the behavior beyond the computed-style assertion: the production Storybook build and this story's play function pass; the rendered tab strip overflows (283px content in 236px) with a zero horizontal scrollbar gutter; and a Chromium cascade experiment confirms that higher-layer scrollbar-width: none suppresses the gutter even with the low-layer WebKit recipe present. The visual capsule treatment remains intact for ordinary scrollports.

The three-way merge against current main applies only this PR's intended CSS move and regression test; it preserves the later Workbar story-service updates already on main. Local format, renderer architecture, rebuilt Storybook typecheck, Storybook build, targeted smoke, and diff-whitespace checks pass. I found no remaining review findings.

中文

该改动正确恢复了全局滚动条默认样式应有的层叠边界。标准属性和 WebKit 胶囊样式现在共同位于较低优先级的 base layer，因此 Astryx 和产品组件能够拥有各自元素级的例外。Session Workbar TabList 保持它有意设置的 scrollbar-width: none，普通嵌套滚动区仍使用全局的 thin 默认值。

我不只检查了计算属性：生产 Storybook build 和本故事的 play 都通过；渲染后的 tab strip 确实溢出（内容 283px、可见 236px），但水平滚动条 gutter 为 0；独立 Chromium 层叠实验也确认，在较低层仍保留 WebKit 胶囊样式时，较高层的 scrollbar-width: none 依然会去掉 gutter。普通滚动区的胶囊视觉样式未丢失。

针对当前 main 的三方合并只应用本 PR 的 CSS 移动和回归测试，并保留 main 上较新的 Workbar story-service 更新。本地 format、renderer architecture、重建依赖后的 Storybook typecheck、Storybook build、目标 smoke 与 diff 空白检查均通过。没有剩余 review 发现。