fix(docs): align sidebar content vertically#1092
Conversation
Signed-off-by: PARTH-TUSSLE <parthgartan26feb@gmail.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the top padding of a sticky container in assets/scss/_styles_project.scss from 1rem to 2.15rem. The reviewer raised valid concerns regarding the use of a hardcoded magic number, which is fragile and could cause misalignment. Additionally, the reviewer pointed out potential layout issues on mobile devices where other sidebars reset their padding, and suggested using a shared SCSS variable or CSS custom property along with appropriate mobile overrides.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| position: sticky; | ||
| top: 5.5rem; | ||
| padding-top: 1rem; | ||
| padding-top: 2.15rem; |
There was a problem hiding this comment.
Using a hardcoded magic number like 2.15rem for vertical alignment is fragile and hard to maintain. It couples the right sidebar's top padding to the current visual height of the left sidebar's elements (like the search bar). If those elements change in height, the sidebars will become misaligned again.
Additionally, on mobile screens (max-width: 767px), the body padding-top is reset to 0 (line 830) and the left sidebar .td-sidebar resets its padding-top to 0 (line 260). However, .td-sidebar-toc does not have a mobile override, meaning it will retain padding-top: 2.15rem and top: 5.5rem on mobile devices supporting position: sticky.
Recommendation:
- Use a shared SCSS variable or CSS custom property (e.g.,
--sidebar-top-alignment) to keep these values synchronized. - Ensure that
.td-sidebar-tocpadding and sticky positioning are appropriately reset or adjusted for mobile screens (max-width: 767px/768px) to match the left sidebar behavior.
| padding-top: 2.15rem; | |
| padding-top: 2.15rem; // Aligns vertically with the left sidebar content |
|
🚀 Preview deployment: https://layer5io.github.io/docs/pr-preview/pr-1092/
|
|
@PARTH-TUSSLE 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 🙂 |
There was a problem hiding this comment.
I see that you have increased the padding of the right sidebar. Wouldn't that create more ugly whitespace though? What do you think about reducing the spacing on the left side instead?
There was a problem hiding this comment.
You're right, on it 🫡
3 participants
Notes for Reviewers
Adjusted the sidebar spacing to align the content in the left and right sidebars more consistently.
This resolves the visual asymmetry where the left sidebar content started lower than the right sidebar content.
Preview of the fix :-
This PR fixes #1080
Signed commits