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>
         )}