fix(web): add provider wizard no longer shifts sideways while it grows

[flamboh]

Note

🤖 Claude Opus 5.5 on behalf of Oliver

The Add provider wizard shifts sideways as it grows after opening, for example when the ACP registry list loads.

Problem

WizardPopup scrolled with the browser's own scrollbar. On desktops where the scrollbar takes up width (6px on Linux and Windows), it appears once the content outgrows the popup and narrows everything inside it. Every card and button jumps left, and jumps back when filtering makes the list short again.

Fix

WizardPopup now scrolls inside our ScrollArea, the overlay scrollbar DialogPanel already uses. Its width no longer depends on whether the content overflows. This applies to every wizard built on WizardPopup.

Because this scroll area spans the whole popup, the scrollbar is inset 16px at each end to clear the popup's rounded corners, as ComposerCommandMenu does.

The ring clipping during the height animation, which this PR also fixed originally, landed separately in #17534.

Evidence

Captured with classic scrollbars enabled, as on Linux and Windows desktop. Each pair crops the right column of provider cards. The dashed line marks where the cards end when the list is short. Watch whether the cards in the full list reach it.

The overlay scrollbar's ends, zoomed 4×, stay clear of the popup's rounded corners:

Validation

• vp test run for the WelcomeWizard and AddProviderInstanceDialog tests (41 passed)
• web typecheck

Made with Claude Opus 5.5 in Claude Code (T3 Code).

[macroscopeapp]

Approvability

Verdict: Approved at 76465f6

Macroscope's review found this PR approvable — This is a small, self-contained UI fix that keeps wizard content width stable by reusing the existing overlay ScrollArea and insetting its scrollbar. It changes only dialog presentation and scrolling across existing wizard consumers, with no API, data, configuration, or deployment impact.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: e212bea3-a1bb-4ef9-8391-5abb407e64f8

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between 5af3946 and 76465f6.

---

---

📒 Files selected for processing (1)

• apps/web/src/components/ui/wizard.tsx

---

---

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/ui/wizard.tsx

---

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

---

---

---

📝 Walkthrough

📝 Walkthrough

Walkthrough

WizardPopup now wraps its content in a vertically styled ScrollArea. It retains its size-dependent maximum width and removes the previous explicit overflow classes.

Changes

UI overflow handling

Layer / File(s)	Summary
Update overflow behavior apps/web/src/components/ui/wizard.tsx	WizardPopup uses ScrollArea to contain its content. The dialog retains its size-dependent maximum width and no longer uses explicit overflow classes.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

---

---

Merge Risk: ⚪ Minimal · up to 76465

No concrete issue currently blocks merging. The wizard’s scrolling behavior remains unverified by the available source evidence.

Pre-merge checks | 3 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check		The description clearly explains the problem, fix, scope, UI evidence, and validation. It does not include the required Scope and approval information or explain why this focused fix qualifies without…	Add the Scope and approval section. Link the related issue or maintainer approval, or explain why this small, obvious bug fix qualifies without prior approval.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Title check		The title clearly and concisely describes the main fix: preventing the Add provider wizard from shifting sideways as its content grows.

---

Full details: Description check

Explanation

The description clearly explains the problem, fix, scope, UI evidence, and validation. It does not include the required Scope and approval information or explain why this focused fix qualifies without prior approval.

---

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

---

---

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

Dismissing prior approval to re-evaluate 5af3946

Dismissing prior approval to re-evaluate 76465f6