fix(theme/Outline): enable scrollable TOC on wide screens for long outlines#3170
Merged
fix(theme/Outline): enable scrollable TOC on wide screens for long outlines#3170
Conversation
Contributor
Rsdoctor Bundle Diff AnalysisFound 3 projects in monorepo, 1 project with changes. 📊 Quick Summary
📋 Detailed Reports (Click to expand)📁 webPath:
📦 Download Diff Report: web Bundle Diff Generated by Rsdoctor GitHub Action |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the right-side outline panel styling to improve the UI/scrolling behavior on wide screens by moving scrolling responsibility from the outline <aside> to the TOC area inside the outline component.
Changes:
- Remove scrolling from
rp-doc-layout__outline(DocLayout aside) by changing it tooverflow: hidden. - Make the outline component a full-height flex column and add an internally scrollable TOC region (
overflow-y: auto) with non-shrinking header/divider/bottom rows.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/core/src/theme/layout/DocLayout/index.scss | Stops the outline <aside> from being a scroll container (sets overflow: hidden). |
| packages/core/src/theme/components/Outline/index.scss | Converts outline to a full-height flex layout and makes the TOC section scrollable. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying rspress-v2 with
|
| Latest commit: |
1e2798d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2a14c10d.rspress-v2.pages.dev |
| Branch Preview URL: | https://syt-vibe-kanban-0296-outline.rspress-v2.pages.dev |
a679a6c to
1e2798d
Compare
Timeless0911
approved these changes
Feb 28, 2026
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
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
Before
After
Related Issue
#3163 (comment)
Checklist
AI Summary
What changed
The outline (TOC) panel on the right side of doc pages now scrolls independently on wide screens (≥1280px), keeping the title and bottom action buttons always visible.
Before: On desktop, the entire outline container scrolled as one block. When a page had many headings, the bottom actions (e.g., "Scroll to top", LLM buttons) would be pushed off-screen and only reachable by scrolling the whole panel.
After: The TOC list scrolls within a fixed-height area while the title header and bottom section remain pinned in place — matching the behavior that was already implemented for narrow screens (≤1280px).
Why
Long outline lists (like those on elements.ai) made the bottom controls inaccessible on desktop. This was noted in #3163 (comment) as a follow-up UX fix.
Implementation details
Outline/index.scss: Addedheight: 100%to.rp-outlineso it fills the outer container. The__tocsection now always hasoverflow-y: autoandmin-height: 0(flex trick for scroll overflow). Title, divider, and bottom sections are markedflex-shrink: 0to stay visible.DocLayout/index.scss: Changed.rp-doc-layout__outlinefromoverflow: hidden scrolltooverflow: hidden, delegating scroll responsibility to the inner__tocelement.max-height: 60vhconstraint is preserved for the floating panel.This PR was written using Vibe Kanban