yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve dialog component layout and manage overflow behavior during onboarding

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-07 01:04:16 +05:30
parent ceff47ba77
commit 5ffbcedfbe
2 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,15 +81,25 @@ export default function EditBoardPage() {
const [isOnboardingOpen, setIsOnboardingOpen] = useState(shouldAutoOpenOnboarding); const [isOnboardingOpen, setIsOnboardingOpen] = useState(shouldAutoOpenOnboarding);
useEffect(() => { useEffect(() => {
const mainEl = mainRef.current;
if (!mainEl) return;
if (!isOnboardingOpen) return; if (!isOnboardingOpen) return;
const previousOverflow = mainEl.style.overflow; const mainEl = mainRef.current;
mainEl.style.overflow = "hidden"; const previousMainOverflow = mainEl?.style.overflow ?? "";
const previousHtmlOverflow = document.documentElement.style.overflow;
const previousBodyOverflow = document.body.style.overflow;
if (mainEl) {
mainEl.style.overflow = "hidden";
}
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
return () => { return () => {
mainEl.style.overflow = previousOverflow; if (mainEl) {
mainEl.style.overflow = previousMainOverflow;
}
document.documentElement.style.overflow = previousHtmlOverflow;
document.body.style.overflow = previousBodyOverflow;
}; };
}, [isOnboardingOpen]); }, [isOnboardingOpen]);

22
frontend/src/components/ui/dialog.tsx
View File

@@ -31,16 +31,18 @@ const DialogContent = React.forwardRef<
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<DialogPortal> <DialogPortal>
<DialogOverlay /> <DialogOverlay />
<DialogPrimitive.Content <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
ref={ref} <DialogPrimitive.Content
className={cn( ref={ref}
"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={cn(
className "w-full max-w-2xl max-h-[calc(100vh-2rem)] overscroll-contain overflow-y-auto rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 shadow-lush focus:outline-none supports-[height:100dvh]:max-h-[calc(100dvh-2rem)] 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} )}
> {...props}
{children} >
</DialogPrimitive.Content> {children}
</DialogPrimitive.Content>
</div>
</DialogPortal> </DialogPortal>
)); ));
DialogContent.displayName = DialogPrimitive.Content.displayName; DialogContent.displayName = DialogPrimitive.Content.displayName;