fix: render forecast modal overlay in portal

app/globals.css

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

components/forecast/day-forecast-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "framer-motion";
 import { CloudSun, Droplets, Sunrise, Sunset, Wind, X } from "lucide-react";
 import { DayForecastCharts } from "@/components/charts/day-forecast-charts";
@@ -55,6 +56,7 @@ export function DayForecastModal({
 }) {
   const { language, locale, t } = useI18n();
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const portalRoot = typeof document === "undefined" ? null : document.body;
   const maximumWind = useMemo(() => getMaximumWind(hours), [hours]);
 
   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`))
     : "";
 
-  return (
+  const modal = (
     <AnimatePresence>
       {day ? (
         <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 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -179,4 +181,6 @@ export function DayForecastModal({
       ) : null}
     </AnimatePresence>
   );
+
+  return portalRoot ? createPortal(modal, portalRoot) : null;
 }