From 500cb4266f2bb290aba2c2038295500ff7b25188 Mon Sep 17 00:00:00 2001
From: oliver <97427849+flamboh@users.noreply.github.com>
Date: Sat, 10 Oct 2026 00:21:14 -0700
Subject: [PATCH] fix(web): add provider wizard no longer shifts sideways while
 it grows (#17292)

---
 apps/web/src/components/ui/wizard.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ui/wizard.tsx b/apps/web/src/components/ui/wizard.tsx
index 695d4b047ff978a45ec545b4ceb950af5ec52929..be2b10ab761ce8aaf7de2d0a8c00b97261e96802 100644
--- a/apps/web/src/components/ui/wizard.tsx
+++ b/apps/web/src/components/ui/wizard.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps, ReactNode } from "react";
 import { cn } from "../../lib/utils";
 import { AnimatedHeight } from "../AnimatedHeight";
 import { DialogPopup, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "./dialog";
+import { ScrollArea } from "./scroll-area";
 
 /** Compose a wizard from its header, panel, and footer; flow logic stays with the caller. */
 export function WizardPopup({
@@ -14,14 +15,10 @@ export function WizardPopup({
   readonly size?: "default" | "wide";
 }) {
   return (
-    <DialogPopup
-      {...props}
-      className={cn(
-        "overflow-x-hidden overflow-y-auto",
-        size === "wide" ? "max-w-3xl" : "max-w-xl",
-      )}
-    >
-      <div className="flex min-h-0 flex-col">{children}</div>
+    <DialogPopup {...props} className={size === "wide" ? "max-w-3xl" : "max-w-xl"}>
+      <ScrollArea className="*:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4">
+        <div className="flex min-h-0 flex-col">{children}</div>
+      </ScrollArea>
     </DialogPopup>
   );
 }
-- 
2.54.0