fix(layout): pin the right pane's view switch and hide its scrollbar - #142
Merged
Conversation
The right column scrolled as one block, so the Schedule | Exams switch drifted off-screen as soon as the user moved down the calendar or the homework list, and its scrollbar drew a rule down the edge of the pane. The pane is now a full-height column that owns its scrolling internally, the same shape LeftPane already used: the switch is a fixed header and only the content under it scrolls, in a field whose scrollbar is hidden (new `scrollbar-hidden` utility — wheel, touch, and keyboard scrolling are untouched). On mobile, where the panes stack into one page-long scroll, the switch is sticky instead, so it stays reachable from anywhere in the column. Covered by e2e/right-pane-scroll.spec.ts across all three layout branches (fixed 55/45 split, draggable split, stacked). 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
1 participant
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.
What
The right column (Schedule + Homework, or Exams) scrolled as one block — the Schedule | Exams switch scrolled away with the content, and the pane's scrollbar drew a visible rule down its edge.
Now the right pane is a full-height column that owns its scrolling internally — the same shape
LeftPanealready used:sticky top-0instead, pinning to the top of the viewport (on abg-surfacestrip) while the column is in view, so it stays reachable from anywhere in the schedule/exams content.scrollbar-hiddenutility (scrollbar-width: none+::-webkit-scrollbar { display: none }). Wheel, touch, and keyboard scrolling are untouched — only the bar is gone.scrollbar-gutter: stableis dropped along with it, since no bar ever appears.How
AppShell: the right column is nowoverflow-hiddenand full height in both desktop branches (fixed 55/45 grid and the draggablePanelGroup); its bottom padding moves inside the pane so it scrolls with the content instead of clipping the pinned header.App.tsx(RightPane): header row + alg:flex-1 lg:overflow-y-autoscroll field beneath it.scroll-mt-16on the homework section keeps the mobile "Homework" shortcut from landing under the sticky switch.tsconfig.node.json: addsDOMtolib— Playwright'sevaluatecallbacks are typed against browser globals.Verification
pnpm verifygreen (typecheck, lint, format, 954 unit tests, coverage, build) and all 10 Playwright e2e pass.New
e2e/right-pane-scroll.spec.tscovers all three layout branches: at 1440px and 1100px it asserts the field really overflows, its scrollbar width is0, scrolling it moves the content, the switch's bounding box does not move, and the window has no overflow; at 390px it asserts the switch stays pinned in the viewport after scrolling.Manually checked in the running app at 1440 / 1100 / 390px, in both Schedule and Exams views.
Note
The left column's course-list scrollbar is left as-is — the request was about the secondary column. Happy to hide that one too if you want them symmetric.
🤖 Generated with Claude Code