root/daily-briefing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Stündlich-Bereich im Wetter-Modal scrollbar machen

Browse source 
- 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>
This commit is contained in:
Sam 2026-03-03 01:21:07 +01:00
parent b4906b7a48
commit e715197b7a
1 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

60
web/src/components/WeatherDetailModal.tsx
View file

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