trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: account for header height in dialogs

Browse source
This commit is contained in:
trafficlunar 2025-04-18 23:03:25 +01:00
parent ce7a57baef
commit efda1acdc1
7 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/provider.tsx
View file

@ -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}

2
src/components/delete-mii.tsx
View file

@ -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 ${

4
src/components/header.tsx
View file

@ -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>
);
}

2
src/components/image-viewer.tsx
View file

@ -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 ${

2
src/components/profile-settings/delete-account.tsx
View file

@ -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 ${

2
src/components/profile-settings/submit-dialog-button.tsx
View file

@ -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 ${

2
src/components/submit-form/qr-scanner.tsx
View file

@ -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 ${