From 62235f667947a30c9705b2c5326c668e2c75c262 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Thu, 11 Jun 2026 18:08:07 +0200
Subject: [PATCH] Keep day forecast modal scrollbar inside panel

---
 components/forecast/day-forecast-modal.tsx | 136 +++++++++++----------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/components/forecast/day-forecast-modal.tsx b/components/forecast/day-forecast-modal.tsx
index d149971..e8dbbc8 100644
--- a/components/forecast/day-forecast-modal.tsx
+++ b/components/forecast/day-forecast-modal.tsx
@@ -96,85 +96,87 @@ export function DayForecastModal({
             role="dialog"
             aria-modal="true"
             aria-labelledby="day-forecast-title"
-            className="weather-scrollbar h-full w-full overflow-y-auto bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
+            className="h-full w-full overflow-hidden bg-background shadow-card sm:max-w-6xl sm:rounded-panel sm:border sm:border-border/70"
             initial={{ opacity: 0, y: 28, scale: 0.985 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 20, scale: 0.99 }}
             transition={{ type: "spring", stiffness: 260, damping: 28 }}
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <div className="mx-auto max-w-6xl space-y-5 p-4 pb-8 sm:p-6 lg:p-8">
-              <div className="flex items-start justify-between gap-4">
-                <div>
-                  <p className="section-kicker flex items-center gap-2">
-                    <CloudSun className="size-4" />
-                    {t("forecast.dayDetails")}
-                  </p>
-                  <h2 id="day-forecast-title" className="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">{locationName}</h2>
-                  <p className="mt-1 capitalize text-muted">{formattedDate}</p>
-                </div>
-                <button
-                  ref={closeButtonRef}
-                  type="button"
-                  aria-label={t("forecast.closeDetails")}
-                  className="surface-control rounded-control p-3 text-foreground transition hover:bg-surface-raised/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
-                  onClick={onClose}
-                >
-                  <X className="size-5" />
-                </button>
-              </div>
-
-              <Card className="overflow-hidden bg-surface-raised/70 p-5 sm:p-6">
-                <div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
+            <div className="weather-scrollbar h-full overflow-y-auto">
+              <div className="mx-auto max-w-6xl space-y-5 p-4 pb-8 sm:p-6 lg:p-8">
+                <div className="flex items-start justify-between gap-4">
                   <div>
-                    <p className="text-sm text-muted">{getForecastCondition(day.weatherCode, language)}</p>
-                    <div className="mt-2 flex items-end gap-4">
-                      <ForecastIcon code={day.weatherCode} className="mb-2 size-14 text-accent" />
-                      <p className="text-6xl font-semibold tracking-[-0.08em] sm:text-7xl">{formatForecastTemperature(day.temperatureMax, language)}</p>
-                      <p className="mb-2 text-2xl text-muted">{formatForecastTemperature(day.temperatureMin, language)}</p>
+                    <p className="section-kicker flex items-center gap-2">
+                      <CloudSun className="size-4" />
+                      {t("forecast.dayDetails")}
+                    </p>
+                    <h2 id="day-forecast-title" className="mt-2 text-2xl font-semibold tracking-tight sm:text-3xl">{locationName}</h2>
+                    <p className="mt-1 capitalize text-muted">{formattedDate}</p>
+                  </div>
+                  <button
+                    ref={closeButtonRef}
+                    type="button"
+                    aria-label={t("forecast.closeDetails")}
+                    className="surface-control rounded-control p-3 text-foreground transition hover:bg-surface-raised/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+                    onClick={onClose}
+                  >
+                    <X className="size-5" />
+                  </button>
+                </div>
+
+                <Card className="overflow-hidden bg-surface-raised/70 p-5 sm:p-6">
+                  <div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
+                    <div>
+                      <p className="text-sm text-muted">{getForecastCondition(day.weatherCode, language)}</p>
+                      <div className="mt-2 flex items-end gap-4">
+                        <ForecastIcon code={day.weatherCode} className="mb-2 size-14 text-accent" />
+                        <p className="text-6xl font-semibold tracking-[-0.08em] sm:text-7xl">{formatForecastTemperature(day.temperatureMax, language)}</p>
+                        <p className="mb-2 text-2xl text-muted">{formatForecastTemperature(day.temperatureMin, language)}</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2 sm:min-w-[22rem]">
+                      <DayMetric icon={Droplets} label={t("forecast.precipitation")} value={formatForecastRainfall(day.precipitation, language)} />
+                      <DayMetric icon={Wind} label={t("forecast.maxWind")} value={formatForecastWind(maximumWind, language)} />
+                      <DayMetric icon={Sunrise} label={t("forecast.sunrise")} value={formatHour(day.sunrise)} />
+                      <DayMetric icon={Sunset} label={t("forecast.sunset")} value={formatHour(day.sunset)} />
                     </div>
                   </div>
-                  <div className="grid grid-cols-2 gap-2 sm:min-w-[22rem]">
-                    <DayMetric icon={Droplets} label={t("forecast.precipitation")} value={formatForecastRainfall(day.precipitation, language)} />
-                    <DayMetric icon={Wind} label={t("forecast.maxWind")} value={formatForecastWind(maximumWind, language)} />
-                    <DayMetric icon={Sunrise} label={t("forecast.sunrise")} value={formatHour(day.sunrise)} />
-                    <DayMetric icon={Sunset} label={t("forecast.sunset")} value={formatHour(day.sunset)} />
+                </Card>
+
+                <Card className="overflow-hidden p-4 sm:p-5">
+                  <h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3>
+                  <div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
+                    <ul className="flex min-w-max gap-2">
+                      {hours.map((hour) => {
+                        const isPast = isForecastHourPast(hour.time);
+                        return (
+                          <li
+                            key={hour.time}
+                            className={cn(
+                              "w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center",
+                              isPast && "opacity-45",
+                            )}
+                            title={isPast ? t("forecast.pastHour") : getForecastCondition(hour.weatherCode, language)}
+                          >
+                            <p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
+                            <ForecastIcon code={hour.weatherCode} className="mx-auto my-3 size-6 text-accent" />
+                            <p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language)}</p>
+                            <p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent">
+                              <Droplets className="size-3" />
+                              {hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
+                            </p>
+                          </li>
+                        );
+                      })}
+                    </ul>
                   </div>
-                </div>
-              </Card>
+                </Card>
 
-              <Card className="overflow-hidden p-4 sm:p-5">
-                <h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3>
-                <div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
-                  <ul className="flex min-w-max gap-2">
-                    {hours.map((hour) => {
-                      const isPast = isForecastHourPast(hour.time);
-                      return (
-                        <li
-                          key={hour.time}
-                          className={cn(
-                            "w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center",
-                            isPast && "opacity-45",
-                          )}
-                          title={isPast ? t("forecast.pastHour") : getForecastCondition(hour.weatherCode, language)}
-                        >
-                          <p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
-                          <ForecastIcon code={hour.weatherCode} className="mx-auto my-3 size-6 text-accent" />
-                          <p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language)}</p>
-                          <p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent">
-                            <Droplets className="size-3" />
-                            {hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
-                          </p>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </Card>
+                <DayForecastCharts hours={hours} />
 
-              <DayForecastCharts hours={hours} />
-
-              <ForecastSources sources={sources} />
+                <ForecastSources sources={sources} />
+              </div>
             </div>
           </motion.section>
         </motion.div>