feat: enhance onboarding experience by managing overflow behavior and improving dialog close button accessibility

frontend/src/app/boards/[boardId]/edit/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 
 import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
@@ -55,6 +55,8 @@ export default function EditBoardPage() {
   const boardIdParam = params?.boardId;
   const boardId = Array.isArray(boardIdParam) ? boardIdParam[0] : boardIdParam;
 
+  const mainRef = useRef<HTMLElement | null>(null);
+
   const [board, setBoard] = useState<BoardRead | null>(null);
   const [name, setName] = useState<string | undefined>(undefined);
   const [gatewayId, setGatewayId] = useState<string | undefined>(undefined);
@@ -78,6 +80,19 @@ export default function EditBoardPage() {
 
   const [isOnboardingOpen, setIsOnboardingOpen] = useState(shouldAutoOpenOnboarding);
 
+  useEffect(() => {
+    const mainEl = mainRef.current;
+    if (!mainEl) return;
+    if (!isOnboardingOpen) return;
+
+    const previousOverflow = mainEl.style.overflow;
+    mainEl.style.overflow = "hidden";
+
+    return () => {
+      mainEl.style.overflow = previousOverflow;
+    };
+  }, [isOnboardingOpen]);
+
   useEffect(() => {
     if (!boardId) return;
     if (!shouldAutoOpenOnboarding) return;
@@ -233,7 +248,7 @@ export default function EditBoardPage() {
       </SignedOut>
       <SignedIn>
         <DashboardSidebar />
-        <main className="flex-1 overflow-y-auto bg-slate-50">
+        <main ref={mainRef} className="flex-1 overflow-y-auto bg-slate-50">
           <div className="border-b border-slate-200 bg-white px-8 py-6">
             <div>
               <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
@@ -397,19 +412,20 @@ export default function EditBoardPage() {
       <Dialog open={isOnboardingOpen} onOpenChange={setIsOnboardingOpen}>
         <DialogContent
           aria-label="Board onboarding"
-          className="relative"
           onPointerDownOutside={(event) => event.preventDefault()}
           onInteractOutside={(event) => event.preventDefault()}
         >
-          <DialogClose asChild>
+          <div className="flex">
-            <button
+            <DialogClose asChild>
-              type="button"
+              <button
-              className="absolute right-4 top-4 rounded-lg border border-slate-200 p-2 text-slate-500 transition hover:bg-slate-50"
+                type="button"
-              aria-label="Close onboarding"
+                className="sticky top-4 z-10 ml-auto rounded-lg border border-slate-200 bg-[color:var(--surface)] p-2 text-slate-500 transition hover:bg-slate-50"
-            >
+                aria-label="Close onboarding"
-              <X className="h-4 w-4" />
+              >
-            </button>
+                <X className="h-4 w-4" />
-          </DialogClose>
+              </button>
+            </DialogClose>
+          </div>
           {boardId ? (
             <BoardOnboardingChat
               boardId={boardId}

frontend/src/components/ui/dialog.tsx

@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 w-[90vw] max-w-2xl translate-x-[-50%] translate-y-[-50%] rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 shadow-lush focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "fixed left-[50%] top-[50%] z-50 w-[90vw] max-w-2xl max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] overscroll-contain overflow-y-auto rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 shadow-lush focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}