fix: sidebar layout glitch by adding scrollbar-gutter

[MOHIT-SOLANKII]

What does this PR do?

Problem :
There is a layout glitch in the documentation sidebar where expanding sections (such as "Foundations" or "Components") causes a vertical scrollbar to appear, which shifts the content horizontally.

Solution :
I added scrollbar-gutter: stable; to the .side-nav-main class in packages/ui/src/7-components/_side-nav.scss. This ensures that space for the scrollbar is always reserved, preventing jarring layout jumps when the scrollbar toggles visibility.

Test Plan

Verified manually on the local development environment:

1. Run npm run dev to start the docs site.
2. Open the application in a browser.
3. Click on expandable sidebar items like "Foundations" or "Utilities" to trigger the appearance of the vertical scrollbar.
4. Confirmed that the sidebar width remains stable and the text content does not shift or jump.

Related PRs and Issues

N/A

Have you read the Contributing Guidelines on issues?

Yes

Initial Behaviour

Recording.2026-01-20.223241.mp4

Current Behaviour after setting scrollbar-gutter: stable; (Horizontal spacing remains constant)

Recording.2026-01-20.223644.mp4

Summary by CodeRabbit

• Style
  • Improved scrollbar rendering behavior in the sidebar navigation to prevent layout shifts when scrollbars appear or disappear.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: b70650e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[appwrite]

Pink (appwrite/pink)

Project ID: 688b850d003678e26eb4

Sites (1)

Site	Status	Logs	Preview	QR
pink 688b852d002905ceebe1	Failed	Authorize	Preview URL

Tip

Appwrite has crossed the 50K GitHub stars milestone with hundreds of active contributors

[coderabbitai]

Walkthrough

A single CSS property modification to the side navigation component's main block. The scrollbar-gutter property value is changed from initial to stable in the &-main selector within _side-nav.scss. No functional logic is altered, no exported entity signatures are modified, and all other styling rules remain unchanged.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: adding scrollbar-gutter CSS property to fix a sidebar layout glitch caused by scrollbar visibility toggling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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 and usage tips.}