zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render forecast modal overlay in portal

Browse Source
This commit is contained in:
zv
2026-06-04 20:59:17 +02:00
parent a4f02d711a
commit 747868867f
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/globals.css
View File

@@ -90,6 +90,9 @@ select {
} }
.modal-overlay { .modal-overlay {
position: fixed;
inset: -1px 0 0;
min-height: calc(100dvh + 1px);
background: hsl(var(--foreground) / 0.55); background: hsl(var(--foreground) / 0.55);
} }
} }

8
components/forecast/day-forecast-modal.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { useEffect, useMemo, useRef } from "react"; import { useEffect, useMemo, useRef } from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { CloudSun, Droplets, Sunrise, Sunset, Wind, X } from "lucide-react"; import { CloudSun, Droplets, Sunrise, Sunset, Wind, X } from "lucide-react";
import { DayForecastCharts } from "@/components/charts/day-forecast-charts"; import { DayForecastCharts } from "@/components/charts/day-forecast-charts";
@@ -55,6 +56,7 @@ export function DayForecastModal({
}) { }) {
const { language, locale, t } = useI18n(); const { language, locale, t } = useI18n();
const closeButtonRef = useRef<HTMLButtonElement>(null); const closeButtonRef = useRef<HTMLButtonElement>(null);
const portalRoot = typeof document === "undefined" ? null : document.body;
const maximumWind = useMemo(() => getMaximumWind(hours), [hours]); const maximumWind = useMemo(() => getMaximumWind(hours), [hours]);
useEffect(() => { useEffect(() => {
@@ -80,11 +82,11 @@ export function DayForecastModal({
? new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", timeZone: "UTC" }).format(new Date(`${day.date}T12:00:00Z`)) ? new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", timeZone: "UTC" }).format(new Date(`${day.date}T12:00:00Z`))
: ""; : "";
return ( const modal = (
<AnimatePresence> <AnimatePresence>
{day ? ( {day ? (
<motion.div <motion.div
className="modal-overlay fixed inset-0 z-[90] flex items-center justify-center p-0 sm:p-4 lg:p-8" className="modal-overlay z-[90] flex items-center justify-center p-0 sm:p-4 lg:p-8"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -179,4 +181,6 @@ export function DayForecastModal({
) : null} ) : null}
</AnimatePresence> </AnimatePresence>
); );
return portalRoot ? createPortal(modal, portalRoot) : null;
} }