Removes double scrollbar in Settings > Storage#5920
Conversation
…nt double scrollbar The outer element had both a fixed height (`calc(100vh - marginTop)`) and `margin-bottom: 16px`, making the total document height 16px taller than the viewport. This caused the browser to show its own page-level scrollbar alongside StudioPage's inner `overflow-y: auto` scroll. Moving the spacing to `padding-bottom` on the inner element keeps it inside the scrollable area so the document height stays at exactly 100vh. Fixes learningequality#5864 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
akolson
changed the title
rtibblesbot
left a comment
rtibblesbot
left a comment
There was a problem hiding this comment.
Clean, minimal fix that correctly addresses the root cause.
CI passing. Visual inspection confirmed: before screenshot shows the double scrollbar, after video frames consistently show only the single inner-content scrollbar across all settings tabs. No design spec to compare against; general visual completeness looks good.
- praise: see inline comment
@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?
Reviewed the pull request diff checking for:
- Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
- Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
- Architecture: duplicated concerns, minimal interfaces, composition over inheritance
- Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
- Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
- Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
- Checked CI status and linked issue acceptance criteria
- For UI changes: inspected screenshots for layout, visual completeness, and consistency
|
|
||
| .studio-page-inner { | ||
| width: 100%; | ||
| padding-bottom: 16px; |
There was a problem hiding this comment.
praise: Correct minimal fix — moves the spacing inside the scroll container rather than removing it or patching around the symptom. The margin-bottom on a fixed-height element was always going to add to document flow; padding-bottom on the inner div is exactly where this belongs.
2 participants
Summary
StudioPagesetsheight: calc(100vh - marginTop)on its outer element to create a fixed-height scrollable content area. However, the outer element also hadmargin-bottom: 16pxin CSS, making the total rendered document height100vh + 16px. That extra 16px caused the browser to show a page-level scrollbar alongside StudioPage's ownoverflow-y: autoinner scroll — producing the double scrollbar seen in the issue.Fix: move
margin-bottom: 16pxfrom.studio-page-outertopadding-bottom: 16pxon.studio-page-inner. The spacing is preserved (appears at the bottom of scrollable content), but it now lives inside the scroll container so document height stays at exactly100vh.Before (from issue — double scrollbar visible on the right):
After: single scrollbar inside the content area only.
Screen.Recording.2026-05-18.at.15.28.26.mov
References
Fixes #5864
Reviewer guidance
StudioPagewrapper.StudioImmersiveModalalso usesStudioPage(withmarginTop=0) — open any channel editor modal and confirm scrolling still works correctly there.AI usage
I used Claude Code to diagnose the root cause (identifying that
margin-bottomon the fixed-height outer element was the 16px overflow causing the page-level scroll) and to implement the one-line fix. I reviewed the change and verified it preserves the visual spacing while eliminating the extra document height.