Skip to content

fix: resolve sidebar clipping and scrolling issues#1010

Merged
Rajesh-Nagarajan-11 merged 6 commits into
layer5io:masterfrom
yashnagar67:fix-sidebar-clipping
May 12, 2026
Merged

fix: resolve sidebar clipping and scrolling issues#1010
Rajesh-Nagarajan-11 merged 6 commits into
layer5io:masterfrom
yashnagar67:fix-sidebar-clipping

Conversation

@yashnagar67

@yashnagar67 yashnagar67 commented May 4, 2026

Copy link
Copy Markdown
Contributor

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>

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

Copy link
Copy Markdown
Contributor

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

github-actions Bot commented May 4, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-05-12 16:17 UTC

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

banana-three-join commented May 5, 2026

Copy link
Copy Markdown
Contributor

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

Bharath314 commented May 8, 2026

Copy link
Copy Markdown
Contributor

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
@Sbragul26

Copy link
Copy Markdown
Member

Thanks @yashnagar67 ,

image

While reviewing the preview, I noticed the extra sidebar toggle button issue started after moving _sidebar-tree.scss into the td/ folder (shown in the screenshot). The mobile toggle button is now appearing beside the search bar on desktop screens, and the icon is also not visible properly in mobile view as well.

It may be better to keep _sidebar-tree.scss in its original location and apply the small CSS fix directly in _styles_project.scss, since that already contains the main sidebar navigation styles. Adding a simple fix like overflow: visible; or max-height: none; there should resolve the clipping issue without changing the Docsy override structure.

Comment thread assets/scss/td/_sidebar-tree.scss Outdated
@yashnagar67

Copy link
Copy Markdown
Contributor Author

@Sbragul26 thanks i moved sidebar-tree.scss to original location

Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
@yashnagar67 yashnagar67 force-pushed the fix-sidebar-clipping branch from 1d7d8b1 to 051e280 Compare May 11, 2026 21:04
@yashnagar67 yashnagar67 requested a review from Bharath314 May 11, 2026 21:05

@Sbragul26 Sbragul26 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM 👍

@Bharath314 Bharath314 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM! 🚀

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 merged commit 549db8f into layer5io:master May 12, 2026
3 of 4 checks passed
@welcome

welcome Bot commented May 12, 2026

Copy link
Copy Markdown

        Thank you for contributing to the Layer5 community! 🎉 \ \ Congrats! \ \         ⭐ Please leave a star on the project. 😄

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

6 participants