From af9bf42d058fd3234b9e6deda701526fa4809a47 Mon Sep 17 00:00:00 2001
From: Vincent van der Wal <github@vincentvanderwal.nl>
Date: Wed, 22 Jul 2026 18:48:24 +0200
Subject: [PATCH] static routing fixed

---
 .../components/charts/ChartContainer.svelte   |  87 ++--
 src/lib/utils/maps-domain.ts                  |  80 +++
 src/routes/{+layout.server.ts => +layout.ts}  |   0
 src/routes/weather/maps/+page.svelte          |  47 +-
 .../weather/week/[location]/+page.svelte      |   2 +-
 .../week/[location]/HourlyTable.svelte        | 488 +++++++++---------
 .../week/[location]/ModelSelector.svelte      |   2 +-
 7 files changed, 430 insertions(+), 276 deletions(-)
 create mode 100644 src/lib/utils/maps-domain.ts
 rename src/routes/{+layout.server.ts => +layout.ts} (100%)

diff --git a/src/lib/components/charts/ChartContainer.svelte b/src/lib/components/charts/ChartContainer.svelte
index 7710f99..ee6b24e 100644
--- a/src/lib/components/charts/ChartContainer.svelte
+++ b/src/lib/components/charts/ChartContainer.svelte
@@ -31,6 +31,8 @@
 		chartHeight?: number;
 		/** Extra vertical padding in pixels added to the total min-height (default: 2) */
 		extraPadding?: number;
+		/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
+		minWidth?: number;
 		/** Optional CSS class for the outer wrapper */
 		class?: string;
 		/** Slot content (charts go here) */
@@ -42,6 +44,7 @@
 		chartCount = 1,
 		chartHeight = 300,
 		extraPadding = 2,
+		minWidth = 560,
 		class: className = '',
 		children
 	}: Props = $props();
@@ -51,53 +54,63 @@
 	let minHeight = $derived(chartHeight * chartCount + extraPadding);
 </script>
 
-<div class="chart-container relative {className}" style:min-height="{minHeight}px">
-	<!-- Chart content area -->
-	<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-
-	<!-- Loading overlay -->
+<div class="chart-bleed">
 	<div
-		class="loading-overlay absolute inset-0 z-30 flex items-center justify-center rounded-lg bg-background transition-opacity duration-300"
-		class:pointer-events-none={!loading}
-		class:opacity-0={!loading}
-		class:opacity-100={loading}
+		class="chart-container relative {className}"
+		style:min-height="{minHeight}px"
+		style:min-width="{minWidth}px"
 	>
-		<div class="flex flex-col items-center gap-3">
-			<svg
-				class="lucide lucide-loader-circle animate-spin text-muted-foreground"
-				xmlns="http://www.w3.org/2000/svg"
-				width="40"
-				height="40"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M21 12a9 9 0 1 1-6.219-8.56" />
-			</svg>
-			<span class="sr-only">Loading charts...</span>
+		<!-- Chart content area -->
+		<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		<!-- Loading overlay -->
+		<div
+			class="loading-overlay absolute inset-0 z-30 flex items-center justify-center rounded-lg bg-background transition-opacity duration-300"
+			class:pointer-events-none={!loading}
+			class:opacity-0={!loading}
+			class:opacity-100={loading}
+		>
+			<div class="flex flex-col items-center gap-3">
+				<svg
+					class="lucide lucide-loader-circle animate-spin text-muted-foreground"
+					xmlns="http://www.w3.org/2000/svg"
+					width="40"
+					height="40"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M21 12a9 9 0 1 1-6.219-8.56" />
+				</svg>
+				<span class="sr-only">Loading charts...</span>
+			</div>
 		</div>
 	</div>
 </div>
 
 <style>
-	.chart-container {
-		/* Negative horizontal margin on mobile to use full width, reset on md+ */
-		margin-left: -1.5rem;
-		margin-right: -1.5rem;
+	.chart-bleed {
+		/* Bleed exactly into the page padding on mobile (main has p-5 =
+		   1.25rem) for edge-to-edge charts, and a bit past the content
+		   column on md+ (main has 2rem padding) for extra readability.
+		   Charts narrower than their min-width scroll sideways. */
+		margin-left: -1.25rem;
+		margin-right: -1.25rem;
+		overflow-x: auto;
 	}
 
 	@media (min-width: 768px) {
-		.chart-container {
-			margin-left: 0;
-			margin-right: 0;
+		.chart-bleed {
+			margin-left: -1.5rem;
+			margin-right: -1.5rem;
 		}
 	}
 
diff --git a/src/lib/utils/maps-domain.ts b/src/lib/utils/maps-domain.ts
new file mode 100644
index 0000000..1e9f0ea
--- /dev/null
+++ b/src/lib/utils/maps-domain.ts
@@ -0,0 +1,80 @@
+/**
+ * Translates drizzli's model ids (Open-Meteo API model names, see
+ * src/routes/weather/options.ts) into domain values understood by the maps
+ * viewer (open-meteo/maps, weather-map-layer src/domains.ts).
+ *
+ * The map advertises the domains it actually supports in its `om-maps:ready`
+ * handshake; candidates are tried in order and the first advertised one wins.
+ * Seamless API models list their seamless domain first, so they upgrade
+ * automatically once the maps app ships seamless support; until then they fall
+ * back to their widest-coverage member (a regional member could be entirely
+ * off-screen). Models without an entry are tried under their own id; models
+ * the map does not serve at all (best_match, bom, google, UKMO ensembles)
+ * resolve to null.
+ */
+const modelDomainCandidates: Record<string, string[]> = {
+	// DWD Germany
+	icon_seamless: ['dwd_icon_seamless', 'dwd_icon'],
+	icon_global: ['dwd_icon'],
+	icon_eu: ['dwd_icon_eu'],
+	icon_d2: ['dwd_icon_d2'],
+
+	// NOAA U.S.
+	gfs_seamless: ['ncep_gfs_seamless', 'ncep_gfs013'],
+	gfs_global: ['ncep_gfs013'],
+	gfs_hrrr: ['ncep_hrrr_conus'],
+	gfs_graphcast025: ['ncep_gfs_graphcast025'],
+
+	// Météo-France
+	meteofrance_seamless: ['meteofrance_seamless', 'meteofrance_arpege_world025'],
+	meteofrance_arpege_world: ['meteofrance_arpege_world025'],
+	meteofrance_arome_france: ['meteofrance_arome_france0025'],
+
+	// UK Met Office
+	ukmo_seamless: ['ukmo_seamless', 'ukmo_global_deterministic_10km'],
+
+	// KNMI Netherlands
+	knmi_seamless: ['knmi_seamless', 'knmi_harmonie_arome_europe'],
+
+	// DMI Denmark (no DMI seamless domain in the maps project)
+	dmi_seamless: ['dmi_harmonie_arome_europe'],
+
+	// MET Norway
+	metno_seamless: ['metno_nordic_pp'],
+	metno_nordic: ['metno_nordic_pp'],
+
+	// MeteoSwiss (CH2 covers a wider area than CH1)
+	meteoswiss_icon_seamless: ['meteoswiss_icon_ch2'],
+
+	// KMA Korea (kma_ldps is not served by the maps project)
+	kma_seamless: ['kma_gdps'],
+	kma_ldps: ['kma_gdps'],
+
+	// JMA Japan
+	jma_seamless: ['jma_seamless', 'jma_gsm'],
+
+	// GEM Canada (gdps/rdps carry resolution suffixes in newer map builds;
+	// older builds advertise the plain names, so try both)
+	gem_seamless: ['cmc_gem_seamless', 'cmc_gem_gdps_15km', 'cmc_gem_gdps'],
+	gem_global: ['cmc_gem_gdps_15km', 'cmc_gem_gdps'],
+	gem_regional: ['cmc_gem_rdps_10km', 'cmc_gem_rdps'],
+
+	// Ensemble models
+	icon_seamless_eps: ['dwd_icon_eps'],
+	icon_global_eps: ['dwd_icon_eps'],
+	icon_eu_eps: ['dwd_icon_eu_eps'],
+	icon_d2_eps: ['dwd_icon_d2_eps'],
+	ncep_gefs_seamless: ['ncep_gefs025'],
+	gem_global_ensemble: ['cmc_gem_geps']
+};
+
+/** Resolve a model id to a maps domain the map advertised as supported. */
+export const mapsDomainForModel = (
+	model: string,
+	supportedDomains: ReadonlySet<string>
+): string | null => {
+	for (const candidate of modelDomainCandidates[model] ?? [model]) {
+		if (supportedDomains.has(candidate)) return candidate;
+	}
+	return null;
+};
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.ts
similarity index 100%
rename from src/routes/+layout.server.ts
rename to src/routes/+layout.ts
diff --git a/src/routes/weather/maps/+page.svelte b/src/routes/weather/maps/+page.svelte
index f4d52e5..5a44e79 100644
--- a/src/routes/weather/maps/+page.svelte
+++ b/src/routes/weather/maps/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { storedLocation } from '$lib/stores/settings';
+	import { storedLocation, storedModel, storedTheme } from '$lib/stores/settings';
+
+	import { mapsDomainForModel } from '$lib/utils/maps-domain';
 
 	// Hash piping, both directions:
 	// - inbound: a #zoom/lat/lng(/bearing/pitch) hash on OUR url seeds the
@@ -10,6 +12,16 @@
 	//   we mirror it into our url with replaceState. hashOverride is only set
 	//   once on mount, so these mirror updates never reload the iframe.
 	let hashOverride = $state<string | null>(null);
+	let iframeEl = $state<HTMLIFrameElement | null>(null);
+	let mapReady = $state(false);
+
+	const postToMap = (message: Record<string, unknown>) => {
+		iframeEl?.contentWindow?.postMessage(message, MAPS_ORIGIN);
+	};
+
+	// Local maps dev server (open-meteo/maps); production: https://maps.open-meteo.com
+	// Run drizzli on a different port so the map keeps 5173 to itself.
+	const MAPS_ORIGIN = 'http://localhost:5173';
 
 	const MAP_HASH_RE = /^#\d+(\.\d+)?\/-?\d+(\.\d+)?\/-?\d+(\.\d+)?/;
 
@@ -18,10 +30,24 @@
 		hashOverride = MAP_HASH_RE.test(initialHash) ? initialHash : null;
 
 		const onMessage = (event: MessageEvent) => {
-			if (event.origin !== 'https://maps.open-meteo.com') return;
-			const { type, hash } = (event.data ?? {}) as { type?: string; hash?: string };
-			if (type !== 'om-maps:hash' || !hash || !MAP_HASH_RE.test(hash)) return;
-			history.replaceState(history.state, '', hash);
+			if (event.origin !== MAPS_ORIGIN) return;
+			const { type, hash, domains } = (event.data ?? {}) as {
+				type?: string;
+				hash?: string;
+				domains?: string[];
+			};
+			if (type === 'om-maps:hash') {
+				if (!hash || !MAP_HASH_RE.test(hash)) return;
+				history.replaceState(history.state, '', hash);
+			} else if (type === 'om-maps:ready' && Array.isArray(domains)) {
+				// The map is loaded and advertises which domains it can render;
+				// switch it to the selected model and our theme. The domain is
+				// omitted for best_match and models the map does not serve,
+				// keeping the map's own default. Re-fires on iframe reloads.
+				mapReady = true;
+				const domain = mapsDomainForModel($storedModel, new Set(domains));
+				postToMap({ type: 'om-maps:set', ...(domain && { domain }), theme: $storedTheme });
+			}
 		};
 		window.addEventListener('message', onMessage);
 		return () => window.removeEventListener('message', onMessage);
@@ -31,11 +57,19 @@
 	// opens focused on the selected location (zoomed out to regional scale);
 	// picking a new location while on this page recenters the map
 	const iframeSrc = $derived(
-		`https://maps.open-meteo.com/${
+		`${MAPS_ORIGIN}/${
 			hashOverride ??
 			`#6/${$storedLocation.latitude.toFixed(3)}/${$storedLocation.longitude.toFixed(3)}`
 		}`
 	);
+
+	// forward theme switches live; the initial theme travels with the
+	// ready response above (the map ignores no-op updates)
+	$effect(() => {
+		const theme = $storedTheme;
+		if (!mapReady) return;
+		postToMap({ type: 'om-maps:set', theme });
+	});
 </script>
 
 <svelte:head>
@@ -51,6 +85,7 @@
 	     map; it only takes effect when this site itself is served with
 	     COOP/COEP headers (see README, Deployment) -->
 	<iframe
+		bind:this={iframeEl}
 		src={iframeSrc}
 		title="Open-Meteo Interactive Map"
 		loading="lazy"
diff --git a/src/routes/weather/week/[location]/+page.svelte b/src/routes/weather/week/[location]/+page.svelte
index f5266fa..de77553 100644
--- a/src/routes/weather/week/[location]/+page.svelte
+++ b/src/routes/weather/week/[location]/+page.svelte
@@ -150,7 +150,7 @@
 				</div>
 			</div>
 
-			<div class="flex items-center gap-3">
+			<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
 				<ModelSelector
 					selectedModel={params.models?.[0] ?? 'best_match'}
 					onModelChange={(model) => {
diff --git a/src/routes/weather/week/[location]/HourlyTable.svelte b/src/routes/weather/week/[location]/HourlyTable.svelte
index 01b86e2..05060df 100644
--- a/src/routes/weather/week/[location]/HourlyTable.svelte
+++ b/src/routes/weather/week/[location]/HourlyTable.svelte
@@ -210,7 +210,11 @@
 {#if cellData.length > 0}
 	{@const hourly = data.hourly}
 	{@const iconPx = is3h ? 38 : 26}
-	<section class="overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
+	<!-- Full-bleed to the viewport edges on mobile (main has p-5 = 1.25rem);
+	     a contained rounded card on md+ -->
+	<section
+		class="-mx-5 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
+	>
 		<!-- Card toolbar -->
 		<div
 			class="flex flex-wrap items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
@@ -244,248 +248,265 @@
 			</div>
 		</div>
 
-		<div class="relative" bind:clientWidth={tableWidth}>
-			<table class="w-full table-fixed border-collapse whitespace-nowrap">
-				<caption class="sr-only">Hourly weather details for {locationName}</caption>
-				<colgroup>
-					<col class="w-16 md:w-20" />
-					{#each cellData as _ (_.idx)}
-						<col />
-					{/each}
-				</colgroup>
-				<tbody>
-					<!-- Time + Daylight bar (merged) -->
-					<tr class="row">
-						<th class="hdr" scope="row" bind:clientWidth={headerColWidth}>
-							<span class="text-[10px] font-semibold text-muted-foreground">Time</span>
-						</th>
-						<td colspan={cellData.length} class="relative h-10 overflow-visible p-0">
-							<!-- Daylight background -->
-							{#if sunTimes && sunrisePercent != null && sunsetPercent != null}
-								<div
-									class="absolute inset-y-0 left-0 bg-indigo-950/10 dark:bg-indigo-950/40"
-									style="width:{sunrisePercent}%"
-								></div>
-								<div
-									class="absolute inset-y-0 bg-amber-400/15 dark:bg-amber-300/10"
-									style="left:{sunrisePercent}%;width:{sunsetPercent - sunrisePercent}%"
-								></div>
-								<div
-									class="absolute inset-y-0 right-0 bg-indigo-950/10 dark:bg-indigo-950/40"
-									style="width:{100 - sunsetPercent}%"
-								></div>
-								<!-- Sunrise marker + label -->
-								<div class="absolute inset-y-0 w-px bg-amber-500/70" style="left:{sunrisePercent}%">
-									<span
-										class="absolute bottom-0.5 left-1 text-[10px] leading-none font-semibold whitespace-nowrap text-amber-700 dark:text-amber-300"
+		<!-- Below the min-width the table scrolls sideways instead of squeezing;
+		     1h needs far more room than 3h (24 vs 8 columns) -->
+		<div class="overflow-x-auto">
+			<div
+				class="relative {is3h ? 'min-w-[560px]' : 'min-w-[1100px]'}"
+				bind:clientWidth={tableWidth}
+			>
+				<table class="w-full table-fixed border-collapse whitespace-nowrap">
+					<caption class="sr-only">Hourly weather details for {locationName}</caption>
+					<colgroup>
+						<col class="w-16 md:w-20" />
+						{#each cellData as _ (_.idx)}
+							<col />
+						{/each}
+					</colgroup>
+					<tbody>
+						<!-- Time + Daylight bar (merged) -->
+						<tr class="row">
+							<th class="hdr" scope="row" bind:clientWidth={headerColWidth}>
+								<span class="text-[10px] font-semibold text-muted-foreground">Time</span>
+							</th>
+							<td colspan={cellData.length} class="relative h-10 overflow-visible p-0">
+								<!-- Daylight background -->
+								{#if sunTimes && sunrisePercent != null && sunsetPercent != null}
+									<div
+										class="absolute inset-y-0 left-0 bg-indigo-950/10 dark:bg-indigo-950/40"
+										style="width:{sunrisePercent}%"
+									></div>
+									<div
+										class="absolute inset-y-0 bg-amber-400/15 dark:bg-amber-300/10"
+										style="left:{sunrisePercent}%;width:{sunsetPercent - sunrisePercent}%"
+									></div>
+									<div
+										class="absolute inset-y-0 right-0 bg-indigo-950/10 dark:bg-indigo-950/40"
+										style="width:{100 - sunsetPercent}%"
+									></div>
+									<!-- Sunrise marker + label -->
+									<div
+										class="absolute inset-y-0 w-px bg-amber-500/70"
+										style="left:{sunrisePercent}%"
 									>
-										<svg
-											class="inline-block fill-foreground"
-											width="12px"
-											height="12px"
-											aria-hidden="true"
-										>
-											<use
-												class="stroke-2"
-												xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"
-											></use>
-										</svg>
-										<span class="align-middle">{formatTime(sunTimes.sunrise)}</span>
-									</span>
-								</div>
-								<!-- Sunset marker + label -->
-								<div class="absolute inset-y-0 w-px bg-indigo-400/70" style="left:{sunsetPercent}%">
-									<span
-										class="absolute right-1 bottom-0.5 inline-flex items-center gap-1 text-[10px] leading-none font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-300"
-									>
-										<svg
-											class="inline-block fill-foreground"
-											width="12px"
-											height="12px"
-											aria-hidden="true"
-										>
-											<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
-											></use>
-										</svg>
-										<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
-									</span>
-								</div>
-							{/if}
-							<!-- Hour labels -->
-							{#each cellData as cell, i (cell.idx)}
-								{@const leftPct = (i / cellData.length) * 100}
-								{@const widthPct = 100 / cellData.length}
-								<span
-									class="absolute top-0 flex items-start pt-1.5 pl-1 text-sm font-bold
-									{cell.isNow ? 'text-red-600 dark:text-red-400' : ''}"
-									style="left:{leftPct}%;width:{widthPct}%"
-								>
-									{#if is3h}
-										{formatZoned(cell.date, data.timezone, 'HH')}
-									{:else}
-										<span class="inline-flex items-baseline gap-1">
-											<span class="text-[11px] font-semibold"
-												>{formatZoned(cell.date, data.timezone, 'HH')}</span
-											>
-											<sup
-												class="align-baseline text-[9px] leading-none font-semibold text-muted-foreground"
-												>00</sup
-											>
-										</span>
-									{/if}
-								</span>
-							{/each}
-						</td>
-					</tr>
-
-					<!-- Weather Icons -->
-					{#if showRow('icons')}
-						<tr class="row">
-							{@render rowHeader('wi-day-cloudy')}
-							{#each cellData as cell, i (cell.idx)}
-								{@const wCode = hourly.weather_code[cell.idx]}
-								<td
-									class="cell leading-0 {is3h ? 'h-14' : 'h-11'}"
-									class:icon-day={cell.isDaytime}
-									class:icon-night={!cell.isDaytime}
-									class:icon-dawn={!cell.isDaytime && cellData[i + 1]?.isDaytime}
-									class:icon-dusk={cell.isDaytime && cellData[i + 1] && !cellData[i + 1].isDaytime}
-								>
-									{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
-								</td>
-							{/each}
-						</tr>
-					{/if}
-
-					<!-- Temperature -->
-					{#if showRow('temperature')}
-						<tr class="row">
-							{@render rowHeader('wi-thermometer', tempUnit, 'Temp')}
-							{#each cellData as cell (cell.idx)}
-								{@const temp = hourly.temperature_2m[cell.idx]}
-								{@const style = getTempStyle(temp, String(units.temperature_unit))}
-								<td
-									class="cell h-10 font-bold {is3h ? 'text-lg' : 'text-[15px]'}"
-									style="background-color:{style.bg};color:{style.fg}"
-								>
-									{formatTemp(temp)}
-								</td>
-							{/each}
-						</tr>
-					{/if}
-
-					<!-- Feels Like -->
-					{#if showRow('feels')}
-						<tr class="row">
-							{@render rowHeader(undefined, tempUnit, 'Feels')}
-							{#each cellData as cell (cell.idx)}
-								{@const temp = hourly.apparent_temperature[cell.idx]}
-								<td class="cell h-8 text-muted-foreground {is3h ? 'text-[13px]' : 'text-[11px]'}">
-									{formatTemp(temp)}
-								</td>
-							{/each}
-						</tr>
-					{/if}
-
-					<!-- Wind -->
-					{#if showRow('wind')}
-						<tr class="row">
-							{@render rowHeader('wi-strong-wind', windUnit, 'Wind')}
-							{#each cellData as cell (cell.idx)}
-								{@const wind = hourly.windspeed_10m[cell.idx]}
-								{@const windDir = hourly.winddirection_10m[cell.idx]}
-								<td class="cell h-13 align-middle leading-tight">
-									{#if windDir != null && !isNaN(windDir)}
 										<span
-											class="inline-block leading-0"
-											style="transform:{getWindArrowRotation(windDir)}"
+											class="absolute bottom-0.5 left-1 text-[10px] leading-none font-semibold whitespace-nowrap text-amber-700 dark:text-amber-300"
 										>
-											{@render weatherIcon('wi-direction-down', 22)}
+											<svg
+												class="inline-block fill-foreground"
+												width="12px"
+												height="12px"
+												aria-hidden="true"
+											>
+												<use
+													class="stroke-2"
+													xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"
+												></use>
+											</svg>
+											<span class="align-middle">{formatTime(sunTimes.sunrise)}</span>
 										</span>
-									{/if}
-									<span class="block font-semibold {is3h ? 'text-sm' : 'text-xs'}">
-										{formatValue(wind)}
+									</div>
+									<!-- Sunset marker + label -->
+									<div
+										class="absolute inset-y-0 w-px bg-indigo-400/70"
+										style="left:{sunsetPercent}%"
+									>
+										<span
+											class="absolute right-1 bottom-0.5 inline-flex items-center gap-1 text-[10px] leading-none font-semibold whitespace-nowrap text-indigo-600 dark:text-indigo-300"
+										>
+											<svg
+												class="inline-block fill-foreground"
+												width="12px"
+												height="12px"
+												aria-hidden="true"
+											>
+												<use
+													class="stroke-2"
+													xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
+												></use>
+											</svg>
+											<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
+										</span>
+									</div>
+								{/if}
+								<!-- Hour labels -->
+								{#each cellData as cell, i (cell.idx)}
+									{@const leftPct = (i / cellData.length) * 100}
+									{@const widthPct = 100 / cellData.length}
+									<span
+										class="absolute top-0 flex items-start pt-1.5 pl-1 text-sm font-bold
+									{cell.isNow ? 'text-red-600 dark:text-red-400' : ''}"
+										style="left:{leftPct}%;width:{widthPct}%"
+									>
+										{#if is3h}
+											{formatZoned(cell.date, data.timezone, 'HH')}
+										{:else}
+											<span class="inline-flex items-baseline gap-1">
+												<span class="text-[11px] font-semibold"
+													>{formatZoned(cell.date, data.timezone, 'HH')}</span
+												>
+												<sup
+													class="align-baseline text-[9px] leading-none font-semibold text-muted-foreground"
+													>00</sup
+												>
+											</span>
+										{/if}
 									</span>
-								</td>
-							{/each}
+								{/each}
+							</td>
 						</tr>
-					{/if}
 
-					<!-- Humidity -->
-					{#if showRow('humidity')}
-						<tr class="row">
-							{@render rowHeader('wi-humidity', '%', 'Humidity')}
-							{#each cellData as cell (cell.idx)}
-								{@const hum = hourly.relative_humidity_2m[cell.idx]}
-								<td class="cell h-8" style="background:{getHumidityBg(hum ?? 0)}">
-									{formatValue(hum)}
-								</td>
-							{/each}
-						</tr>
-					{/if}
+						<!-- Weather Icons -->
+						{#if showRow('icons')}
+							<tr class="row">
+								{@render rowHeader('wi-day-cloudy')}
+								{#each cellData as cell, i (cell.idx)}
+									{@const wCode = hourly.weather_code[cell.idx]}
+									<td
+										class="cell leading-0 {is3h ? 'h-14' : 'h-11'}"
+										class:icon-day={cell.isDaytime}
+										class:icon-night={!cell.isDaytime}
+										class:icon-dawn={!cell.isDaytime && cellData[i + 1]?.isDaytime}
+										class:icon-dusk={cell.isDaytime &&
+											cellData[i + 1] &&
+											!cellData[i + 1].isDaytime}
+									>
+										{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
+									</td>
+								{/each}
+							</tr>
+						{/if}
 
-					<!-- Cloud Cover -->
-					{#if showRow('clouds')}
-						<tr class="row">
-							{@render rowHeader('wi-cloud', '%', 'Clouds')}
-							{#each cellData as cell (cell.idx)}
-								{@const cloud = hourly.cloud_cover[cell.idx]}
-								<td
-									class="cell h-8"
-									style="background:rgba(140,160,180,{getCloudOpacity(cloud ?? 0)})"
-								>
-									{formatValue(cloud)}
-								</td>
-							{/each}
-						</tr>
-					{/if}
+						<!-- Temperature -->
+						{#if showRow('temperature')}
+							<tr class="row">
+								{@render rowHeader('wi-thermometer', tempUnit, 'Temp')}
+								{#each cellData as cell (cell.idx)}
+									{@const temp = hourly.temperature_2m[cell.idx]}
+									{@const style = getTempStyle(temp, String(units.temperature_unit))}
+									<td
+										class="cell h-10 font-bold {is3h ? 'text-lg' : 'text-[15px]'}"
+										style="background-color:{style.bg};color:{style.fg}"
+									>
+										{formatTemp(temp)}
+									</td>
+								{/each}
+							</tr>
+						{/if}
 
-					<!-- Precipitation -->
-					{#if showRow('precipitation')}
-						<tr class="row">
-							{@render rowHeader('wi-raindrop', precipUnit, 'Precip')}
-							{#each cellData as cell (cell.idx)}
-								{@const precip = hourly.precipitation[cell.idx]}
-								{@const prob = hourly.precipitation_probability[cell.idx]}
-								<td
-									class="cell precip-cell {is3h ? 'h-14' : 'h-11'}"
-									style="background:{getPrecipProbBg(prob ?? 0)}"
-									title={formatPrecipTooltip(precip, prob)}
-								>
-									{#if precip > 0}
-										<div class="precip-bar" style="height:{getPrecipBarHeight(precip)}%"></div>
-										<span class="precip-label {is3h ? 'text-[13px]' : 'text-[10px]'}">
-											{precip.toFixed(1)}
+						<!-- Feels Like -->
+						{#if showRow('feels')}
+							<tr class="row">
+								{@render rowHeader(undefined, tempUnit, 'Feels')}
+								{#each cellData as cell (cell.idx)}
+									{@const temp = hourly.apparent_temperature[cell.idx]}
+									<td class="cell h-8 text-muted-foreground {is3h ? 'text-[13px]' : 'text-[11px]'}">
+										{formatTemp(temp)}
+									</td>
+								{/each}
+							</tr>
+						{/if}
+
+						<!-- Wind -->
+						{#if showRow('wind')}
+							<tr class="row">
+								{@render rowHeader('wi-strong-wind', windUnit, 'Wind')}
+								{#each cellData as cell (cell.idx)}
+									{@const wind = hourly.windspeed_10m[cell.idx]}
+									{@const windDir = hourly.winddirection_10m[cell.idx]}
+									<td class="cell h-13 align-middle leading-tight">
+										{#if windDir != null && !isNaN(windDir)}
+											<span
+												class="inline-block leading-0"
+												style="transform:{getWindArrowRotation(windDir)}"
+											>
+												{@render weatherIcon('wi-direction-down', 22)}
+											</span>
+										{/if}
+										<span class="block font-semibold {is3h ? 'text-sm' : 'text-xs'}">
+											{formatValue(wind)}
 										</span>
-									{/if}
-								</td>
-							{/each}
-						</tr>
-					{/if}
-				</tbody>
-			</table>
+									</td>
+								{/each}
+							</tr>
+						{/if}
 
-			<!-- "Now" column highlight + exact-time line -->
-			{#if nowLeftPx != null}
-				{@const colWidth = (tableWidth - headerColWidth) / cellData.length}
-				{@const nowIdx = cellData.findIndex((c) => c.isNow)}
-				{#if nowIdx >= 0}
+						<!-- Humidity -->
+						{#if showRow('humidity')}
+							<tr class="row">
+								{@render rowHeader('wi-humidity', '%', 'Humidity')}
+								{#each cellData as cell (cell.idx)}
+									{@const hum = hourly.relative_humidity_2m[cell.idx]}
+									<td class="cell h-8" style="background:{getHumidityBg(hum ?? 0)}">
+										{formatValue(hum)}
+									</td>
+								{/each}
+							</tr>
+						{/if}
+
+						<!-- Cloud Cover -->
+						{#if showRow('clouds')}
+							<tr class="row">
+								{@render rowHeader('wi-cloud', '%', 'Clouds')}
+								{#each cellData as cell (cell.idx)}
+									{@const cloud = hourly.cloud_cover[cell.idx]}
+									<td
+										class="cell h-8"
+										style="background:rgba(140,160,180,{getCloudOpacity(cloud ?? 0)})"
+									>
+										{formatValue(cloud)}
+									</td>
+								{/each}
+							</tr>
+						{/if}
+
+						<!-- Precipitation -->
+						{#if showRow('precipitation')}
+							<tr class="row">
+								{@render rowHeader('wi-raindrop', precipUnit, 'Precip')}
+								{#each cellData as cell (cell.idx)}
+									{@const precip = hourly.precipitation[cell.idx]}
+									{@const prob = hourly.precipitation_probability[cell.idx]}
+									<td
+										class="cell precip-cell {is3h ? 'h-14' : 'h-11'}"
+										style="background:{getPrecipProbBg(prob ?? 0)}"
+										title={formatPrecipTooltip(precip, prob)}
+									>
+										{#if precip > 0}
+											<div class="precip-bar" style="height:{getPrecipBarHeight(precip)}%"></div>
+											<span class="precip-label {is3h ? 'text-[13px]' : 'text-[10px]'}">
+												{precip.toFixed(1)}
+											</span>
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/if}
+					</tbody>
+				</table>
+
+				<!-- "Now" column highlight + exact-time line -->
+				{#if nowLeftPx != null}
+					{@const colWidth = (tableWidth - headerColWidth) / cellData.length}
+					{@const nowIdx = cellData.findIndex((c) => c.isNow)}
+					{#if nowIdx >= 0}
+						<div
+							class="pointer-events-none absolute inset-y-0 z-10 border-x border-red-500/30 bg-red-500/5"
+							style="left:{headerColWidth + nowIdx * colWidth}px;width:{colWidth}px"
+						></div>
+					{/if}
 					<div
-						class="pointer-events-none absolute inset-y-0 z-10 border-x border-red-500/30 bg-red-500/5"
-						style="left:{headerColWidth + nowIdx * colWidth}px;width:{colWidth}px"
-					></div>
-				{/if}
-				<div
-					class="pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-red-500/80"
-					style="left:{nowLeftPx}px"
-				>
-					<span
-						class="absolute top-1 left-1/2 -translate-x-1/2 rounded-full bg-red-500 px-1.5 py-px text-[9px] font-bold tracking-wide text-white uppercase shadow-sm"
+						class="pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-red-500/80"
+						style="left:{nowLeftPx}px"
 					>
-						Now
-					</span>
-				</div>
-			{/if}
+						<span
+							class="absolute top-1 left-1/2 -translate-x-1/2 rounded-full bg-red-500 px-1.5 py-px text-[9px] font-bold tracking-wide text-white uppercase shadow-sm"
+						>
+							Now
+						</span>
+					</div>
+				{/if}
+			</div>
 		</div>
 	</section>
 {/if}
@@ -511,11 +532,16 @@
 
 	/* ── Row header ─────────────────────────────────────────────── */
 	.hdr {
+		/* sticky + opaque background: stays readable while the table is
+		   scrolled sideways (z above the "now" overlay, which is z-10) */
+		position: sticky;
+		left: 0;
+		z-index: 20;
 		padding: 4px 2px;
 		text-align: center;
 		font-weight: 600;
 		font-size: 11px;
-		background: color-mix(in oklab, var(--color-muted) 45%, transparent);
+		background: color-mix(in oklab, var(--color-muted) 45%, var(--color-card));
 		border-right: 1px solid var(--color-border);
 		white-space: nowrap;
 		overflow: hidden;
diff --git a/src/routes/weather/week/[location]/ModelSelector.svelte b/src/routes/weather/week/[location]/ModelSelector.svelte
index 864f8ec..318c5d0 100644
--- a/src/routes/weather/week/[location]/ModelSelector.svelte
+++ b/src/routes/weather/week/[location]/ModelSelector.svelte
@@ -42,7 +42,7 @@
 >
 	<Select.Trigger
 		aria-label="{label} selection"
-		class="group h-auto min-w-64 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72"
+		class="group h-auto min-w-0 flex-1 cursor-pointer gap-3 rounded-xl border-2 border-primary/35 bg-card py-2 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-w-72 sm:flex-none"
 	>
 		<div
 			class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary"