From efda1acdc1f035fa82688c94be399a4dc46b71af Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 18 Apr 2025 23:03:25 +0100
Subject: [PATCH] fix: account for header height in dialogs

---
 src/app/provider.tsx                          | 22 +++++++++++++++++++
 src/components/delete-mii.tsx                 |  2 +-
 src/components/header.tsx                     |  4 ++--
 src/components/image-viewer.tsx               |  2 +-
 .../profile-settings/delete-account.tsx       |  2 +-
 .../profile-settings/submit-dialog-button.tsx |  2 +-
 src/components/submit-form/qr-scanner.tsx     |  2 +-
 7 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/app/provider.tsx b/src/app/provider.tsx
index cf81a09..51255d8 100644
--- a/src/app/provider.tsx
+++ b/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}
diff --git a/src/components/delete-mii.tsx b/src/components/delete-mii.tsx
index bd2f49e..b673802 100644
--- a/src/components/delete-mii.tsx
+++ b/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 ${
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 0cb76db..af1ff9d 100644
--- a/src/components/header.tsx
+++ b/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>
 	);
 }
diff --git a/src/components/image-viewer.tsx b/src/components/image-viewer.tsx
index 5b32184..09cfa08 100644
--- a/src/components/image-viewer.tsx
+++ b/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 ${
diff --git a/src/components/profile-settings/delete-account.tsx b/src/components/profile-settings/delete-account.tsx
index 54506ba..b2bf7f1 100644
--- a/src/components/profile-settings/delete-account.tsx
+++ b/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 ${
diff --git a/src/components/profile-settings/submit-dialog-button.tsx b/src/components/profile-settings/submit-dialog-button.tsx
index 585e4a4..ba3ee10 100644
--- a/src/components/profile-settings/submit-dialog-button.tsx
+++ b/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 ${
diff --git a/src/components/submit-form/qr-scanner.tsx b/src/components/submit-form/qr-scanner.tsx
index 37192ad..d8b54af 100644
--- a/src/components/submit-form/qr-scanner.tsx
+++ b/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 ${