From 68fd967f88346b1b4644ea250f07e8df34e8c1e3 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Thu, 11 Jun 2026 18:18:20 +0200
Subject: [PATCH] Keep day forecast hourly cards readable

---
 components/forecast/day-forecast-modal.tsx | 38 +++++++++-------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/components/forecast/day-forecast-modal.tsx b/components/forecast/day-forecast-modal.tsx
index e8dbbc8..06d779e 100644
--- a/components/forecast/day-forecast-modal.tsx
+++ b/components/forecast/day-forecast-modal.tsx
@@ -9,13 +9,11 @@ import { ForecastIcon } from "@/components/forecast/forecast-icon";
 import { ForecastSources } from "@/components/forecast/forecast-sources";
 import { Card } from "@/components/ui/card";
 import { useI18n } from "@/lib/i18n";
-import { cn } from "@/lib/utils";
 import {
   formatForecastRainfall,
   formatForecastTemperature,
   formatForecastWind,
   getForecastCondition,
-  isForecastHourPast,
 } from "@/lib/forecast-utils";
 import type { DailyForecast, ForecastSource, HourlyForecast } from "@/types/forecast";
 
@@ -148,27 +146,21 @@ export function DayForecastModal({
                   <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>
-                        );
-                      })}
+                      {hours.map((hour) => (
+                        <li
+                          key={hour.time}
+                          className="w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center"
+                          title={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>