Fix docs ThemeSelect dropdown causing page scroll on /docs index

[jaysomani]

What does this PR do?

This PR fixes an issue where opening the Theme dropdown on the /docs index page caused the entire page to scroll.

The root cause was that the dropdown menu was rendered inside the /docs

scroll container because portal was set to null. This caused Melt UI / Floating UI to scroll the container in order to satisfy dropdown positioning constraints.

The fix portals the dropdown menu to document.body, removing it from the nested scroll context and preventing unwanted page scrolling. This follows standard production practices used in most design systems for dropdowns and popovers.

This change does not affect article pages, mobile behavior, or any other Select usage.

Test Plan

Run the website locally using bun run dev.

Navigate to /docs.

Scroll near the footer and open the Theme dropdown.

Verify that the page does not scroll when the dropdown opens.

Navigate to /docs/advanced/* or /docs/tutorials/*.

Open the Theme dropdown and verify behavior remains unchanged.

Test on mobile view to ensure native select behavior is unaffected.

Related PRs and Issues

This PR resolves the Theme dropdown scroll issue reported in the Appwrite website docs discussion.

#2604

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the contributing guidelines.

Summary by CodeRabbit

Bug Fixes

• Enhanced Select component stability and compatibility across different deployment environments.

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

[coderabbitai]

Walkthrough

The Select.svelte component's portal configuration was updated to be environment-aware. The static portal: null setting was replaced with a conditional expression that assigns document.body when the DOM is available and null otherwise. Additionally, the explicit scrollAlignment: 'center' setting was removed. This change improves Server-Side Rendering (SSR) compatibility by deferring portal behavior determination to runtime rather than using a static value.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 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 title accurately describes the main change: fixing an issue where the ThemeSelect dropdown on /docs index causes unwanted page scrolling by adjusting portal configuration.
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.}

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3482bf6 and 870aaa3.

📒 Files selected for processing (1)

• src/lib/components/Select.svelte

🔇 Additional comments (1)

src/lib/components/Select.svelte (1)

54-54: LGTM! SSR-safe portal fix correctly addresses the scroll issue.

The typeof document !== 'undefined' check properly handles SSR environments, and portaling to document.body removes the dropdown from nested scroll containers, preventing Floating UI from triggering unwanted scroll adjustments.

Since this is a shared component, this change will apply to all Select usages—which is appropriate, as portaling dropdowns to body is the expected pattern for floating UI elements.

---

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.}