feat(workspace): the rail's scrollbar is thin, hidden at rest and revealed on hover or scroll (abilityai/trinity-enterprise#608) - #2736
Open
trinity-ability wants to merge 1 commit into
Open
Conversation
…ealed on hover or scroll (Abilityai/trinity-enterprise#608) The Workspace rail's one scroll axis (the tab body) showed a stock scrollbar: the global 8px painted bar in dark mode, the browser default in light — and because any `::-webkit-scrollbar` rule opts an element out of macOS overlay bars, a dark-mode Mac saw an always-on bar where the light rail hid its bar when idle. The two themes disagreed about scrollbar weight. A scoped `rail-scroll` style on that one container makes both behave like the good case and thinner: `scrollbar-width: thin` with a transparent `scrollbar-color` at rest, the tertiary ink (gray-500 light / gray-400 dark, at reduced alpha) on `:hover` / `:focus-within` / `.is-scrolling`, with a 150ms fade; a parallel `::-webkit-scrollbar*` block gives Safari the same 6px rounded thumb. Reveal changes colour only — never display, width, scrollbar-width or overflow — so content wraps byte-identically hovered or not (proved by comparing every descendant's bounding rect at rest vs hovered, both themes). `sm:`-and-up only, so the mobile sheet stays native; the transition is off under prefers-reduced-motion. `is-scrolling` is a passive scroll listener holding a class ~800ms past the last event. It was found in the capture, not designed in: Chromium on a Mac in the default "show scroll bars automatically" mode renders the standard-property bar as a native overlay that shows during scrolling only and never on hover, so with the rest colour transparent the CSS-only cut showed no bar at all, in either theme. The global dark rule in style.css is untouched; the sidebar list and the transcript are a follow-up. Human feel check confirmed on the issue. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018LigrhfzBXbTBCdoeQ69if
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
data-testid="portal-rail-body", its one scroll axis) gets a scopedrail-scrollstyle:scrollbar-width: thinwith a transparentscrollbar-colorat rest, the tertiary ink (gray-500 light / gray-400 dark, reduced alpha) revealed on:hover/:focus-within/.is-scrolling, 150ms fade, and a matching 6px rounded-thumb::-webkit-scrollbar*block for Safari. Reveal changes colour only — never display / width / scrollbar-width / overflow — so nothing reflows.sm:-and-up only (the mobile sheet stays native); transition off underprefers-reduced-motion.is-scrollingis a passivescrolllistener holding a class ~800ms past the last event. Found in the capture, not designed in: Chromium on a Mac in the default "show scroll bars automatically" mode renders the standard-property bar as a native overlay that shows during scrolling only and never on hover, so with the rest colour transparent the CSS-only cut showed no bar at all..dark ::-webkit-scrollbarrule instyle.cssis untouched; the sidebar list and the conversation transcript are a follow-up per the issue.Changes
src/frontend/src/components/portal/PortalRail.vue—rail-scrollclass +is-scrollingbinding on the body, the scroll listener (cleared on unmount), the scoped style block.src/frontend/tests/unit/portalRail.spec.js— three source guards (hidden at rest on both engines and revealed on hover/focus/scroll; reveal rules set colour only and the WebKit width is fixed; tokens on both themes,sm-and-up, reduced-motion). The existing guard pinning the body's class string now includesrail-scroll(the one way to add the class to that string).docs/memory/requirements/core-agent.md— AC-9 under 5.19 (the rail shell).docs/memory/feature-flows/workspace-rail.md— the scrollbar section.Test Plan
npm run test:unit— 125 files, 2735 tests pass (raw-color and loading-gate ratchets unchanged);npm run check:tokensOKgetBoundingClientRectat rest vs hovered serialises identically, both themes (Playwright, Chromium)Fixes abilityai/trinity-enterprise#608
🤖 Generated with Claude Code
https://claude.ai/code/session_018LigrhfzBXbTBCdoeQ69if