fix(docs): align sidebar content vertically

[PARTH-TUSSLE]

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

• [✅] Yes, I signed my commits.

[gemini-code-assist]

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.

[github-actions]

🚀 Preview deployment: https://docs.layer5.io/pr-preview/pr-1092/

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

[Bhumikagarggg]

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

[Bharath314]

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?

[PARTH-TUSSLE]

You're right, on it 🫡

[PARTH-TUSSLE]

@Bharath314 Removed the unnecessary whitespace and improved responsiveness by using shared variable

[Bharath314]

Visually, it looks correct, but I think we should go for a more robust solution. Look how both the sidebars are styled differently:

_left sidebar_ _right sidebar_

A more future-proof and cleaner solution would be to making the styling consistent at the top level to ensure visual symmetry. It would be great idea to use css variables to make the styling consistent for both sidebars.

[PARTH-TUSSLE]

Hey @Bharath314 , I have now completely refactored the styling system of the sidebars, created shared central variables that are being used by both sidebars for consistency, they are perfectly aligned and no unnecessary whitespace, would appreciate any follow up.

[KatalKavya96]

Thanks @PARTH-TUSSLE , I reviewed the latest changes and checked the preview deployment.

• The desktop alignment looks good now, and the shared sidebar variables are a cleaner approach compared to the earlier hardcoded spacing fix. The unnecessary whitespace also seems to be removed.

However, I noticed a regression in mobile view: the content readability breaks because the page overflows and the full content cannot be viewed comfortably within a single phone viewport.

Could you please recheck the mobile responsive behaviour. The desktop view looks good so the remaining concern is mainly the mobile overflow/readability issue.

[PARTH-TUSSLE]

Thanks @PARTH-TUSSLE , I reviewed the latest changes and checked the preview deployment.

• The desktop alignment looks good now, and the shared sidebar variables are a cleaner approach compared to the earlier hardcoded spacing fix. The unnecessary whitespace also seems to be removed.

However, I noticed a regression in mobile view: the content readability breaks because the page overflows and the full content cannot be viewed comfortably within a single phone viewport.

Could you please recheck the mobile responsive behaviour. The desktop view looks good so the remaining concern is mainly the mobile overflow/readability issue.

Thank you for the follow up, On it 🫡.

[KatalKavya96]

Thanks @PARTH-TUSSLE , I reviewed the latest changes and checked the preview deployment.

• The desktop alignment looks good now, and the shared sidebar variables are a cleaner approach compared to the earlier hardcoded spacing fix. The unnecessary whitespace also seems to be removed.

However, I noticed a regression in mobile view: the content readability breaks because the page overflows and the full content cannot be viewed comfortably within a single phone viewport.
Could you please recheck the mobile responsive behaviour. The desktop view looks good so the remaining concern is mainly the mobile overflow/readability issue.

Thank you for the follow up, On it 🫡.

Thanks for the update, @PARTH-TUSSLE. Just ping me once the further changes are pushed, and I’ll take another look at the preview.

[PARTH-TUSSLE]

Thanks @PARTH-TUSSLE , I reviewed the latest changes and checked the preview deployment.

• The desktop alignment looks good now, and the shared sidebar variables are a cleaner approach compared to the earlier hardcoded spacing fix. The unnecessary whitespace also seems to be removed.

However, I noticed a regression in mobile view: the content readability breaks because the page overflows and the full content cannot be viewed comfortably within a single phone viewport.
Could you please recheck the mobile responsive behaviour. The desktop view looks good so the remaining concern is mainly the mobile overflow/readability issue.

Thank you for the follow up, On it 🫡.

Thanks for the update, @PARTH-TUSSLE. Just ping me once the further changes are pushed, and I’ll take another look at the preview.

Hey @KatalKavya96 I've been working on this issue since morning, fixed the responsiveness and the overflow problem.
Before ->

After ->

And also , since the nav options weren't completely visible and were not fitting in the viewport, I made it scrollable. ->

Please look into it , would appreciate any follow up .