fix(frontend): tighten the app shell lines and the playground scrollbars - #5461
Conversation
…inuous The collapsed sidebar was 80px wide around 14-16px icons, and the rail painted two different greys because the antd menu drew its own background over the middle. The frame lines were nearly invisible, so the rail edge and the top bars never read as one frame. - Rail is 48px collapsed, one flat colour, darker than the content in dark mode and white in light mode. - New shell tokens (rail background, frame line, scroll thumb) so the rail edge, the breadcrumb bar and the playground header share one line. - Workflow sidebar header rows are 45px, so the rail's lines land on the same y as the content's and carry straight across. - The agent picker loses its own border inside the framed row. - Configuration panel gets a quiet scrollbar: gutter always reserved, so no content shift, thumb only on hover or focus.
… cleanly The config and chat panels were separated by a 12px dark channel, and neither header reached it. The config panel's sticky headers also stopped short of the panel edge once the scrollbar gutter was reserved. - The Build/Chat divider is a hairline in the shell's frame colour, so both panels butt against it. The grab zone stays 11px wide and the grip only appears on hover or drag. - Sticky headers stretch across the reserved scrollbar gutter, so they span the panel edge to edge. The gutter width is measured, since it is zero on overlay-scrollbar systems. - The chat panel gets the same quiet scrollbar as the config panel. - Below 320px the config panel drops what it can spare: Configuration becomes Config, Deploy and Commit become icon buttons, section rows keep their icon and summary, and list rows keep their name. It can now be dragged down to 240px.
…panel collapse Keeps only the sticky-header fix from the previous commit: config panel headers still span the panel edge to edge across the reserved scrollbar gutter. Restored: the 12px gutter divider with its persistent grip, the 20% minimum config width, and the full labels on section rows, list rows and the Deploy/Commit buttons.
Reserving a scrollbar gutter kept the sticky headers short by the scrollbar's width, and the earlier attempt to stretch them across it did not work: the browser clips painting at the content box, so the notch stayed. The config panel now reserves nothing and shows no scrollbar, so its headers span the panel edge to edge and the layout never shifts. The panel still scrolls with the wheel and its section headers still pin.
…ivider
- The config panel gets a scrollbar drawn on top of the content instead
of beside it, so the sticky headers keep the full panel width and the
thumb still appears on hover, after a scroll, and while dragging.
- Model & harness names the model the way the picker does ("Sonnet"),
from the harness catalog, instead of the stored id ("sonnet").
- The divider channel between config and chat drops from 12px to 9px.
Wires OverlayScrollbar into the playground config pane: the pane becomes the positioned hover group, and the thumb is rendered as a sibling of the scroller so it floats over the content.
antd styles every Splitter panel with overflow:auto. A transient overflow while the config sections load left Chrome's thin panel scrollbar stuck on screen with a full-height thumb, next to the panel's real overlay scrollbar. The sections inside own all scrolling, so the panels are clipped instead.
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe PR adds a draggable overlay scrollbar for the playground config panel, introduces shell and scrollbar theme tokens, narrows and restyles the sidebar rail, updates scrollbar utilities, and uses harness catalog labels for model summaries. ChangesShell and scrollbar layout
Harness model labeling
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant PlaygroundMainView
participant OverlayScrollbar
participant ConfigPanel
PlaygroundMainView->>OverlayScrollbar: pass configPanelRef
OverlayScrollbar->>ConfigPanel: measure scroll geometry
ConfigPanel-->>OverlayScrollbar: report scroll, resize, and mutation events
OverlayScrollbar->>ConfigPanel: update scrollTop while dragging
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
web/oss/src/components/Sidebar/components/SidebarSkeletonLoader.tsx (1)
14-20: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSkeleton loader still hardcodes
border-gray-100, not the new shell-line token.The collapsed width now matches the 48px rail, but this file's border classes (here and at line 29) still use
border-gray-100whileSidebarShell.tsxandworkflowScope.tsxwere updated to useborder-[var(--ag-shell-line)]. The skeleton's frame line will not match the real rail once mounted, particularly in dark mode.♻️ Align skeleton border with the shell-line token
<section className={clsx( - "flex flex-col justify-between h-screen border border-r border-solid border-gray-100", + "flex flex-col justify-between h-screen border border-r border-solid border-[var(--ag-shell-line)]", { "w-[48px] items-center": collapsed, "w-[236px]": !collapsed, }, )}
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: b5e4d006-34fb-461a-8f27-85b2aa8e5b0e
📒 Files selected for processing (15)
web/oss/src/components/Layout/assets/styles.tsweb/oss/src/components/OverlayScrollbar/index.tsxweb/oss/src/components/Playground/Components/MainLayout/index.tsxweb/oss/src/components/Playground/Components/PlaygroundHeader/index.tsxweb/oss/src/components/ProtectedRoute/ProtectedRoute.tsxweb/oss/src/components/Sidebar/components/SidebarSkeletonLoader.tsxweb/oss/src/components/Sidebar/components/WorkflowPicker.tsxweb/oss/src/components/Sidebar/engine/SidebarShell.tsxweb/oss/src/components/Sidebar/scopes/workflowScope.tsxweb/oss/src/styles/globals.cssweb/oss/src/styles/theme-variables.cssweb/oss/src/styles/theme/palette.tsweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/agentTemplate/useModelHarness.tsxweb/packages/agenta-entity-ui/src/DrillInView/SchemaControls/connectionUtils.tsweb/scripts/generate-tailwind-tokens.ts
Railway Preview Environment
|
A cancelled pointer stream (touch interruption, app switch) never fires pointerup, so the drag state stayed on and the window listeners stayed attached. The thumb also takes touch-action: none, so a touch drag moves it instead of scrolling the page. Also clarifies why modelLabel stops at the catalog's label and name: the caller still has the schema's own title to try before the raw id.
|
Thanks, both looked at. Pointer drag (
The docstring said "same precedence as the picker", which is what made this look like a bug. That was fair. It now spells out where the two differ and why. |
1 participant
Context
The app shell and the agent playground had a set of small visual defects that added up. The collapsed navigation rail was 80px wide around 14px icons, and it painted in two different greys because the Ant Design menu drew its own background over the middle of it. The lines that frame the app were nearly invisible and never lined up: the rail's edge, the breadcrumb bar and the playground header each stopped where the next one started. Inside the playground, the configuration panel's scrollbar sat there permanently, eating 11px of width and cutting the sticky section headers short of the panel edge. The Model and harness row named the model by its stored id (
sonnet) while the picker right next to it used the real name.Changes
The navigation rail. It is 48px collapsed, sized to its icons the way Langfuse and Linear size theirs. The menu background is transparent so the rail is one flat colour, darker than the content in dark mode and white in light mode.
The frame lines. The theme gains a small
shellgroup: a rail background, one line colour shared by every frame line, and the two scroll thumb colours. The rail edge, the breadcrumb bar and the playground header now use that one line colour. The workflow sidebar's two header rows are 45px tall, so the rail's lines land at exactly the same height as the content's and read as one line across the app. The agent picker loses its own border, since it sits inside a row the rail already frames.The configuration panel's scrollbar. A native scrollbar reserves layout width, and the browser will not paint content into that reserved strip, so the sticky headers were always short by the scrollbar's width. Widening the content does not help, and Chrome ignores
overflow-clip-marginonce the other axis scrolls. So the panel keeps no native scrollbar at all, and a newOverlayScrollbarcomponent draws the thumb on top of the content instead. It appears while the pointer is in the panel and for a moment after a scroll, it can be dragged, and it never affects layout. The chat panel keeps a native thin scrollbar that stays transparent until you hover it, since its header does not have the same problem.A stuck second scrollbar. Ant Design styles every Splitter panel with
overflow: auto, so each panel was itself a scroll container even though the section inside does the scrolling. While the configuration sections load, the content overflows the panel for a moment. Chrome painted the panel's own thin scrollbar for that moment and then left it on screen with a full-height thumb, because by then there was nothing left to scroll. Both panels are clipped now.Model names.
modelLabelreads the harness catalog the model picker already uses, so the summary line saysClaude Code · Sonnetinstead ofClaude Code · sonnet. For Pi harness models the difference is larger, since their ids look likeanthropic/claude-sonnet-4-5.The divider. The channel between the configuration panel and the chat drops from 12px to 9px.
Tests / notes
palette.tsand the generated files were regenerated withpnpm generate:tailwind-tokens.What to QA
Claude Code · Sonnet.