fix(ui): reserve scrollbar gutter on html (#954) - #956
Merged
Conversation
Adds `scrollbar-gutter: stable` to the document root so pages that toggle between scrolling and non-scrolling layouts don't shift horizontally. Specifically, Agent Detail's Chat / Session tabs use `h-screen overflow-hidden` (no body scrollbar) while other tabs use `min-h-screen` (scrollbar appears). The unreserved gutter caused the centered `max-w-[1400px]` panel to jerk ~15px on each tab switch. Related to #954 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
vybe
approved these changes
Jun 1, 2026
vybe
left a comment
vybe
left a comment
Contributor
There was a problem hiding this comment.
LGTM — minimal CSS fix, root cause matches the issue diagnosis, clean diff, no security exposure. Validated via /validate-pr.
5 tasks
5 tasks
vybe
pushed a commit
that referenced
this pull request
Jul 2, 2026
) The Chat tab flips the page into a fullscreen flex-column layout; `mx-auto` on <main> (auto inline margins) then overrides align-items:stretch on the flex item, collapsing <main> to content width and centering it — so the whole tab card shifted right and narrowed on every Chat<->other-tab switch (measured: x 189->359, width 1272->930 at 1600px). Fix: pin <main> to `w-full max-w-[1400px]` in both layout modes (harmless in the non-fullscreen block mode; restores full width in fullscreen). Verified across 1024/1440/1600/1920px — the card now has zero x/width delta between Overview and Chat and snaps back identically. Complements #956 (scrollbar-gutter), which fixed the separate body-scrollbar shift. Adds an @Interactive e2e guard measuring card-box parity across the switch. Related to #954 Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
html { scrollbar-gutter: stable; }insrc/frontend/src/style.css.h-screen overflow-hiddenon the root (no body scrollbar), other tabs usemin-h-screen(scrollbar appears). Reserving the gutter at the document level keeps the centeredmax-w-[1400px]panel pinned.Did not touch the Chat/Session padding — issue notes "the inner panels manage their own padding and double padding will compress the message area." The remaining padding gap is intentional UX (edge-to-edge message thread vs
p-6body content); the no-jerk criterion is satisfied without harmonizing it.Related to #954
Test plan
🤖 Generated with Claude Code