From e715197b7a3ea375bd9e5836ce5b24ed0a926f4d Mon Sep 17 00:00:00 2001
From: Sam <sam@openclaw.local>
Date: Tue, 3 Mar 2026 01:21:07 +0100
Subject: [PATCH] =?UTF-8?q?Fix:=20St=C3=BCndlich-Bereich=20im=20Wetter-Mod?=
 =?UTF-8?q?al=20scrollbar=20machen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- shrink-0 statt min-w damit Flex-Items nicht zusammengedrückt werden
- Scrollbar sichtbar (thin) mit accent-farbigem Styling
- Fade-Gradient am rechten Rand als Scroll-Hinweis

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/components/WeatherDetailModal.tsx | 60 ++++++++++++-----------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/web/src/components/WeatherDetailModal.tsx b/web/src/components/WeatherDetailModal.tsx
index c803e5e..edbb30e 100644
--- a/web/src/components/WeatherDetailModal.tsx
+++ b/web/src/components/WeatherDetailModal.tsx
@@ -112,35 +112,39 @@ export default function WeatherDetailModal({ weather, hourly, onClose, accentCol
               <span className="section-rule" />
             </div>
 
-            <div
-              className="flex gap-0 overflow-x-auto border border-base-300"
-              style={{ scrollbarWidth: "none" }}
-            >
-              {hourly.map((slot, i) => (
-                <div
-                  key={slot.time}
-                  className={`
-                    flex flex-col items-center gap-1 min-w-[3.5rem] px-2 py-3
-                    border-r border-base-300 last:border-r-0
-                    ${i === 0 ? `${a.bg}/[0.06]` : "hover:bg-base-100"}
-                  `}
-                >
-                  <span className={`text-[9px] font-mono font-medium tracking-wider uppercase ${
-                    i === 0 ? a.text : "text-base-500"
-                  }`}>
-                    {i === 0 ? "Jetzt" : slot.time}
-                  </span>
-                  <span className="text-lg select-none">{slot.icon}</span>
-                  <span className={`text-xs data-value ${i === 0 ? `${a.text} ${a.glow}` : "text-base-900"}`}>
-                    {Math.round(slot.temp)}°
-                  </span>
-                  {slot.precip_chance > 0 && (
-                    <span className="text-[8px] font-mono text-azure/80">
-                      {slot.precip_chance}%
+            <div className="relative">
+              <div
+                className="flex gap-0 overflow-x-auto border border-base-300"
+                style={{ scrollbarWidth: "thin", scrollbarColor: `${accentColor === "gold" ? "#e8a44a" : accentColor === "mint" ? "#4ae8a8" : "#a87aec"}40 transparent` }}
+              >
+                {hourly.map((slot, i) => (
+                  <div
+                    key={slot.time}
+                    className={`
+                      flex flex-col items-center gap-1 shrink-0 w-[3.5rem] py-3
+                      border-r border-base-300 last:border-r-0
+                      ${i === 0 ? `${a.bg}/[0.06]` : "hover:bg-base-100"}
+                    `}
+                  >
+                    <span className={`text-[9px] font-mono font-medium tracking-wider uppercase ${
+                      i === 0 ? a.text : "text-base-500"
+                    }`}>
+                      {i === 0 ? "Jetzt" : slot.time}
                     </span>
-                  )}
-                </div>
-              ))}
+                    <span className="text-lg select-none">{slot.icon}</span>
+                    <span className={`text-xs data-value ${i === 0 ? `${a.text} ${a.glow}` : "text-base-900"}`}>
+                      {Math.round(slot.temp)}°
+                    </span>
+                    {slot.precip_chance > 0 && (
+                      <span className="text-[8px] font-mono text-azure/80">
+                        {slot.precip_chance}%
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+              {/* Scroll fade hint */}
+              <div className="pointer-events-none absolute top-0 right-0 bottom-0 w-8 bg-gradient-to-l from-base-50 to-transparent" />
             </div>
           </div>
         )}