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);
useEffect(() => {
const mainEl = mainRef.current;
if (!mainEl) return;
if (!isOnboardingOpen) return;
const previousOverflow = mainEl.style.overflow;
mainEl.style.overflow = "hidden";
const mainEl = mainRef.current;
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 () => {
mainEl.style.overflow = previousOverflow;
if (mainEl) {
mainEl.style.overflow = previousMainOverflow;
}
document.documentElement.style.overflow = previousHtmlOverflow;
document.body.style.overflow = previousBodyOverflow;
};
}, [isOnboardingOpen]);

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

@@ -31,16 +31,18 @@ const DialogContent = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"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}
>
{children}
</DialogPrimitive.Content>
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<DialogPrimitive.Content
ref={ref}
className={cn(
"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}
>
{children}
</DialogPrimitive.Content>
</div>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;