fix: docs topbar and inline code overflow on phones

[pratyush618]

Summary

On phone viewports the docs pages gained a horizontal scroll, pushing the theme and GitHub buttons in the topbar off-screen (reported on iPhone SE, 375px).

Two causes, measured with headless Chrome at 375/360/320px:

• Topbar min-content width (412px) exceeded the viewport: desktop gap/padding plus the full SDK picker never shrank. The existing mobile breakpoint now tightens nav spacing, and below 480px the SDK picker collapses to its language icon + caret (accessible name unchanged; the brand wordmark stays).
• Long inline code tokens (env vars, dotted paths) could not break, widening the page — worst on the changelog (568px wide at 375). Inline code in articles and release notes now uses overflow-wrap: anywhere.

Verification

Headless-Chrome sweep of landing, quickstart (both SDK trees), architecture, and changelog at 375/360/320px: document.scrollWidth === clientWidth on every page (was 412 and 568 before). Screenshot check at 375px confirms all topbar controls visible with no horizontal scroll. biome check and typecheck green.

Summary by CodeRabbit

• Style
  • Improved mobile navigation spacing on small screens.
  • Simplified the SDK picker display on very small phones.
  • Added wrapping for long code identifiers to prevent horizontal scrolling in documentation and changelogs.
  • Refined SDK dropdown label styling without changing its behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5127fc72-1cac-4cad-9628-80618d2fc795

📥 Commits

Reviewing files that changed from the base of the PR and between 0e8807a and 0aab3e9.

📒 Files selected for processing (4)

• docs/app/components/ui/site-nav.tsx
• docs/app/styles/atoms.css
• docs/app/styles/changelog.css
• docs/app/styles/docs.css

---

📝 Walkthrough

Walkthrough

The changes refine small-screen documentation layout by tightening navigation spacing, hiding SDK picker labels at narrow widths, and allowing long code identifiers to wrap without horizontal overflow.

Changes

Mobile documentation layout

Layer / File(s)	Summary
Responsive navigation and SDK picker docs/app/components/ui/site-nav.tsx, docs/app/styles/atoms.css, docs/app/styles/docs.css	Adds a class to the active SDK label, tightens mobile navigation spacing, and hides SDK picker labels at very small widths.
Long identifier wrapping docs/app/styles/changelog.css, docs/app/styles/docs.css	Allows long identifiers in changelog and article code content to wrap across lines.

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

🚥 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 summarizes the main phone-layout fixes for the docs topbar and inline code overflow.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/docs-mobile-topbar-overflow

---

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