refactor(web): add radius and alwaysShowScrollbars to ScrollArea

[juliusmarminge]

Eight scroll areas opted out of the inherited radius with rounded-none
because they sit flush to a panel edge, and two forced the scrollbar
visible by reaching into its slot. Expose radius="none" and
alwaysShowScrollbars and migrate the sites. No rendered change.

Lowers the no-restyle ceiling from 812 to 802.

Part of the components/ui className cleanup (audit and guardrail: #12982). Each layer of stack #12993 lowers the shadcn/no-restyle ceiling; CI fails if the count rises.

Written by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style

  • Standardized scrollable areas with consistent square-corner styling.
  • Improved scrollbar visibility options in onboarding flows.
  • Preserved existing scrolling, sizing, and overflow behavior.

• Chores

  • Tightened the styling lint threshold to enforce updated UI conventions.

[macroscopeapp]

Approvability

Verdict: Approved at de1fecf

Macroscope's review found this PR approvable — This is a small, self-contained ScrollArea styling refactor that centralizes existing radius and scrollbar classes without changing defaults or introducing new workflows. The accompanying lint-ceiling change tightens the guard rather than suppressing diagnostics.

No code changes detected at 1417da0. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ No successful main baseline artifact is available yet. This run establishes the initial measurement.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	—	13.5 KiB	—	15.1 KiB	✅
Codex	Thread snapshot wire	—	7.1 KiB	—	7.3 KiB	✅
Codex	Live turn WebSocket wire	—	6.4 KiB	—	7.8 KiB	✅
Codex	Live turn WebSocket decoded	—	56.2 KiB	—	66.4 KiB	✅
Codex	Live turn messages	—	9	—	21	✅
Claude	Total thread wire	—	13.5 KiB	—	15.1 KiB	✅
Claude	Thread snapshot wire	—	7.1 KiB	—	7.3 KiB	✅
Claude	Live turn WebSocket wire	—	6.4 KiB	—	7.8 KiB	✅
Claude	Live turn WebSocket decoded	—	57.0 KiB	—	66.4 KiB	✅
Claude	Live turn messages	—	9	—	21	✅

Baseline: unavailable · PR result: 1417da0 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: aef7b5e7-7552-4d60-8287-a889dabf32cd

📥 Commits

Reviewing files that changed from the base of the PR and between 8d8b39d and de1fecf.

📒 Files selected for processing (9)

• apps/web/src/components/ChatMarkdown.tsx
• apps/web/src/components/RightPanelTabs.tsx
• apps/web/src/components/chat/ComposerBanner.tsx
• apps/web/src/components/files/FilePreviewPanel.tsx
• apps/web/src/components/onboarding/WelcomeWizard.tsx
• apps/web/src/components/settings/DiagnosticsSettings.tsx
• apps/web/src/components/settings/ProviderSettingsPanel.tsx
• apps/web/src/components/ui/scroll-area.tsx
• scripts/lint-restyle-ceiling.ts

Limit details: You’ve used all 10 included reviews currently available.

---

📝 Walkthrough

Walkthrough

ScrollArea now supports explicit corner radius and always-visible scrollbars. Existing web components use these props instead of equivalent CSS classes. The restyle finding ceiling is reduced from 812 to 802.

Changes

ScrollArea styling API migration

Layer / File(s)	Summary
ScrollArea options apps/web/src/components/ui/scroll-area.tsx	Adds radius and alwaysShowScrollbars props. The component applies square or inherited corners and optional visible scrollbars.
Consumer adoption apps/web/src/components/ChatMarkdown.tsx, apps/web/src/components/RightPanelTabs.tsx, apps/web/src/components/chat/ComposerBanner.tsx, apps/web/src/components/files/FilePreviewPanel.tsx, apps/web/src/components/onboarding/WelcomeWizard.tsx, apps/web/src/components/settings/*, scripts/lint-restyle-ceiling.ts	Existing scroll areas use the new props. The restyle finding ceiling changes from 812 to 802.

Priority: ⬇️ Low

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

Change: Refactor

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to de1fe

ScrollArea gains optional corner-radius and always-visible scrollbar controls while existing consumers preserve their intended appearance and behavior. The change is merge-ready with normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 27.27% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 11 functions across 9 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding radius and alwaysShowScrollbars options to ScrollArea.
Description check	✅ Passed	The description explains the changes, rationale, scope, rendered-output impact, and related issue. It does not use the template headings or include the checklist, but the required information is mostl…

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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