Prevent settings layout shifts with scrollbar gutters

[juliusmarminge]

Summary

• Add scrollbar-gutter-both to the shared settings page container so centered settings content stays visually centered when the scrollbar appears.
• Switch the reusable scroll area helper to the Tailwind 4.3 scrollbar-gutter-stable utility.

Testing

• vp check
• pnpm lint
• vp run typecheck
• vp run --filter @t3tools/web build
• git diff --check

---

Note

Low Risk
CSS-only layout tweaks on settings and scroll components with no security or data impact.

Overview
Reserves horizontal space for scrollbars so settings pages and scroll areas do not jump horizontally when overflow scrollbars appear.

SettingsPageContainer now uses scrollbar-gutter-both on its main scroll column so the centered max-w-3xl block stays visually centered. The shared ScrollArea viewport swaps the old arbitrary [scrollbar-gutter:stable] class for the Tailwind 4.3 scrollbar-gutter-stable utility when scrollbarGutter is enabled.

^{Reviewed by Cursor Bugbot for commit 3598646. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ffca34c5-fdf8-4871-b308-afd13db3d188

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-scrollbar-layout-shift

---

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

[macroscopeapp]

Approvability

Verdict: Approved

CSS-only changes adding scrollbar gutter utility classes to prevent layout shifts. No runtime logic affected, purely visual/layout improvements.

^{You can customize Macroscope's approvability policy. Learn more.}

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	251694208975e82c56bd5289d014d27db782d79c	88f9ec34318a3522ac20299028ec60ca0080a665
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 251694208975e82c56bd5289d014d27db782d79c App version: 0.1.0 Git commit: fff460b4abc01f29f5b2cdb5bf25d955066816ee	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 88f9ec34318a3522ac20299028ec60ca0080a665 App version: 0.1.0 Git commit: fff460b4abc01f29f5b2cdb5bf25d955066816ee
Update Details	Update Permalink Details Branch: pr-2960 Runtime version: 251694208975e82c56bd5289d014d27db782d79c Git commit: b351b51c36c54fb4d295c2ed764ebdc16f9d3ac4	Update Permalink Details Branch: pr-2960 Runtime version: 88f9ec34318a3522ac20299028ec60ca0080a665 Git commit: b351b51c36c54fb4d295c2ed764ebdc16f9d3ac4
Update QR