fix: account for header height in dialogs

src/app/provider.tsx

@@ -1,8 +1,30 @@
 "use client";
 
+import { useEffect } from "react";
 import { ProgressProvider } from "@bprogress/next/app";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
+	// Calculate header height
+	useEffect(() => {
+		const header = document.querySelector("header");
+		if (!header) return;
+
+		const updateHeaderHeight = () => {
+			document.documentElement.style.setProperty("--header-height", `${header.offsetHeight}px`);
+		};
+
+		const resizeObserver = new ResizeObserver(updateHeaderHeight);
+		resizeObserver.observe(header);
+		window.addEventListener("resize", updateHeaderHeight);
+
+		updateHeaderHeight();
+
+		return () => {
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", updateHeaderHeight);
+		};
+	}, []);
+
 	return (
 		<ProgressProvider height="4px" color="var(--color-amber-500)" options={{ showSpinner: false }} shallowRouting>
 			{children}

src/components/delete-mii.tsx

@@ -54,7 +54,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes }: Props) {
 
 			{isOpen &&
 				createPortal(
-					<div className="fixed inset-0 flex items-center justify-center z-40">
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
 						<div
 							onClick={close}
 							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${

src/components/header.tsx

@@ -11,7 +11,7 @@ export default async function Header() {
 	const session = await auth();
 
 	return (
-		<div className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
+		<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-sm:grid-cols-1">
 			<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400 max-sm:text-center max-sm:col-span-3">
 				TomodachiShare
 			</Link>
@@ -44,6 +44,6 @@ export default async function Header() {
 					</>
 				)}
 			</ul>
-		</div>
+		</header>
 	);
 }

src/components/image-viewer.tsx

@@ -85,7 +85,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
 
 			{isOpen &&
 				createPortal(
-					<div className="fixed inset-0 flex items-center justify-center z-40">
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
 						<div
 							onClick={close}
 							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${

src/components/profile-settings/delete-account.tsx

@@ -48,7 +48,7 @@ export default function DeleteAccount() {
 
 			{isOpen &&
 				createPortal(
-					<div className="fixed inset-0 flex items-center justify-center z-40">
+					<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
 						<div
 							onClick={close}
 							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${

src/components/profile-settings/submit-dialog-button.tsx

@@ -42,7 +42,7 @@ export default function SubmitDialogButton({ title, description, onSubmit, error
 
 			{isOpen &&
 				createPortal(
-					<div className="fixed inset-0 flex-grow flex items-center justify-center z-40">
+					<div className="fixed inset-0 w-full h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
 						<div
 							onClick={close}
 							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${

src/components/submit-form/qr-scanner.tsx

@@ -121,7 +121,7 @@ export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
 	if (!isOpen) return null;
 
 	return (
-		<div className="fixed inset-0 flex items-center justify-center z-40">
+		<div className="fixed inset-0 h-[calc(100%-var(--header-height))] top-[var(--header-height)] flex items-center justify-center z-40">
 			<div
 				onClick={close}
 				className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${