fix: resolve sidebar clipping and scrolling issues#1010
fix: resolve sidebar clipping and scrolling issues#1010yashnagar67 wants to merge 4 commits intolayer5io:masterfrom
Conversation
Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
There was a problem hiding this comment.
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.
|
🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-1010/
|
Signed-off-by: yashnagar67 <nitwalababaji@gmail.com>
|
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>
|
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 |
|
@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 🙂 |
|
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>
f827045 to
1a69648
Compare
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.