Skip to content

fix: resolve sidebar clipping and scrolling issues#1010

Open
yashnagar67 wants to merge 4 commits intolayer5io:masterfrom
yashnagar67:fix-sidebar-clipping
Open

fix: resolve sidebar clipping and scrolling issues#1010
yashnagar67 wants to merge 4 commits intolayer5io:masterfrom
yashnagar67:fix-sidebar-clipping

Conversation

@yashnagar67
Copy link
Copy Markdown
Contributor

@yashnagar67 yashnagar67 commented May 4, 2026

This fixes the issue where the sidebar navigation fields were being clipped at the bottom and couldn't be fully scrolled.
Fixes: #1009

After experimenting with file overrides, I realized the cleanest fix was to simply add max-height: none to .td-sidebar-nav in our _styles_project.scss.

This directly overrides the aggressive max-height restriction from the upstream Docsy theme. Now, the parent .td-sidebar container handles the scrolling natively, which completely stops the bottom links from getting cut off without requiring us to duplicate or move any theme files.

Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request modifies the sidebar navigation styling by changing the overflow property to auto and adjusting the maximum height calculation. Feedback indicates that the overflow change in _styles_project.scss requires an explicit max-height to be effective and avoid clipping. Additionally, the update in _sidebar-tree.scss is currently ineffective because the CSS block that applies the height and overflow properties remains commented out.

Comment thread assets/scss/_styles_project.scss Outdated
Comment thread assets/scss/td/_sidebar-tree.scss Outdated
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 4, 2026

🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-1010/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
@banana-three-join
Copy link
Copy Markdown

banana-three-join commented May 5, 2026

Hi! What's the reason behind moving the file from assets/scss/_sidebar-tree.scss to assets/scss/td/_sidebar-tree.scss? Also, the only change was in the increase of height which allows the current items to not clip anymore but if more items get added onto the sidebar, the sidebar will clip again so the problem wasn't technically solved.

… and fix sidebar scroll

Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
@Bharath314
Copy link
Copy Markdown
Contributor

Bharath314 commented May 8, 2026

Hello, I worked on another issue and had actually fixed this in the same PR. Unfortunately, I made a mistake while addressing review comments and accidentally reintroduced this issue again. The fix is simple: add max-height: none; under .td-sidebar-nav. No other changes are needed and you may undo all the changes that you made. Cheers!

@Bhumikagarggg
Copy link
Copy Markdown
Contributor

@yashnagar67 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

@yashnagar67
Copy link
Copy Markdown
Contributor Author

thanks @Bharath314 for your suggestion, now error is resolved

This elegantly overrides the upstream Docsy theme constraint, allowing the parent wrapper to handle scrolling natively without needing to duplicate or move upstream SCSS files.

Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
@yashnagar67 yashnagar67 force-pushed the fix-sidebar-clipping branch from f827045 to 1a69648 Compare May 10, 2026 17:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sidebar fields are not completely visible despite scrollbar

4 participants