[Docs] fix(ui): resolve TOC scrollbar overlap and top clipping

[akshatsinghai6682-sketch]

Notes for Reviewers

This PR fixes #1172

• Added scrollbar-gutter: stable; and a 8px right margin to .td-sidebar-toc to prevent its custom scrollbar from overlapping the browser's native scrollbar.
• Added track margin offsets (margin-top: 0.5rem; margin-bottom: 0.5rem;) to both .td-sidebar and .td-sidebar-toc scrollbars so their top corners/tips are not clipped under the sticky header.
• Ensured consistent 6px width, cyan $primary thumb color, and rounded corners across both left and right sidebars.

Screenshots

Before:

After:

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Improved scrolling and sticky positioning for the right table-of-contents sidebar.
  • Added consistent scrollbar spacing and gutter behavior across sidebars.
  • Enhanced scrollbar appearance, including a highlighted thumb on hover.
  • Refined sidebar spacing and layout consistency.
  • Cleaned up obsolete stylesheet comments and standardized formatting.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 32cdab39-044d-430b-9add-7307c6dc9b37

📥 Commits

Reviewing files that changed from the base of the PR and between 2f7e195 and f4960d9.

📒 Files selected for processing (1)

• assets/scss/_styles_project.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• assets/scss/_styles_project.scss

---

📝 Walkthrough

Walkthrough

The project stylesheet updates scrollbar spacing and WebKit scrollbar styling for both sidebars. The TOC sidebar applies scrolling rules without an @supports gate. Obsolete comments and inconsistent spacing are removed.

Changes

Sidebar styling

Layer / File(s)	Summary
Sidebar scrolling and scrollbar styling assets/scss/_styles_project.scss	The TOC sidebar applies sticky positioning and scrolling directly. It reserves scrollbar space, adds right spacing, and adds WebKit scrollbar styling. The left sidebar also receives custom scrollbar styling.
Stylesheet cleanup and declaration formatting assets/scss/_styles_project.scss	Obsolete commented declarations are removed. Spacing is normalized, and a missing semicolon is added.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: ⚪ Minimal · up to f4960

This PR makes a localized documentation UI styling change to improve sidebar scrollbar spacing and clipping behavior. No actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the TOC scrollbar overlap and top clipping fixes.
Linked Issues check	✅ Passed	The changes address issue #1172 by separating the TOC and native scrollbars and preventing scrollbar clipping at the top.
Out of Scope Changes check	✅ Passed	The stylesheet cleanup and consistent scrollbar styling support the documented sidebar scrollbar objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

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

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@assets/scss/_styles_project.scss`:
- Around line 314-315: Remove the blank line immediately before the position
declaration in the affected style rule, keeping padding-right and position as
consecutive declarations.
- Around line 325-341: Extend the scrollbar styling beside the existing
`.td-sidebar-toc` rules to also target `.td-sidebar`, including scrollbar width,
transparent track with the same top and bottom margins, primary thumb color,
rounded corners, and hover color. Keep TOC-specific `scrollbar-gutter` and
`margin-right` declarations scoped only to `.td-sidebar-toc`.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 76f5a754-cd7b-4f55-a912-028f70a85414

📥 Commits

Reviewing files that changed from the base of the PR and between 460b25e and 6d0cc72.

📒 Files selected for processing (1)

• assets/scss/_styles_project.scss

[dhruveshmishra]

In line number 317 are both padding-right: calc(sidebar-padding-horizontal} + 8px); and margin-right: 8px; necessary here? Using both may add extra empty space or shift the TOC more than intended.

[akshatsinghai6682-sketch]

In line number 317 are both padding-right: calc(sidebar-padding-horizontal} + 8px); and margin-right: 8px; necessary here? Using both may add extra empty space or shift the TOC more than intended.

"Thanks @dhruveshmishra! The padding-right uses the default $sidebar-padding-horizontal without any extra offset alongside margin-right: 8px to prevent redundant spacing."

[dhruveshmishra]

LGTM

[PARTH-TUSSLE]

Hey @akshatsinghai6682-sketch ,Thanks for the update , the overall approach looks good and the before/after screenshots make the fix much easier to verify. Before merging, could you please keep the diff limited to the scrollbar/top-clipping fix and remove the unrelated formatting/comment cleanup? Also, please verify that both the existing padding-right and the new margin-right: 8px are necessary and that the fix behaves correctly in Firefox as well as Chromium. Once that's confirmed, LGTM.

[akshatsinghai6682-sketch]

Sure @PARTH-TUSSLE

[akshatsinghai6682-sketch]

Hey @PARTH-TUSSLE, thanks for the detailed review!

1. Clean Diff: Removed the extra comments and kept the diff strictly limited to the scrollbar/top-clipping fix.
2. Spacing Verification: Verified that padding-right retains the default layout spacing, while margin-right: 8px handles the scrollbar-gutter offset to prevent layout shift.
3. Cross-Browser Verification: Tested on both Chromium-based browsers and Firefox—the layout and scrollbar behavior remain consistent across both without any clipping or overlap.

Let me know if any more changes are required Thank You

[PARTH-TUSSLE]

Thanks for addressing the review points and cleaning up the diff. The change is now appropriately scoped to the issue. LGTM 🦖

[PARTH-TUSSLE]

@Sbragul26 , @Maanvi212006

[Maanvi212006]

LGTM! The fix correctly addresses the scrollbar overlap by reserving scrollbar space and adding separation from the browser scrollbar. The project builds successfully as well.