static routing fixed

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,7 +54,12 @@
 	let minHeight = $derived(chartHeight * chartCount + extraPadding);
 </script>
 
-<div class="chart-container relative {className}" style:min-height="{minHeight}px">
+<div class="chart-bleed">
+	<div
+		class="chart-container relative {className}"
+		style:min-height="{minHeight}px"
+		style:min-width="{minWidth}px"
+	>
 		<!-- Chart content area -->
 		<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
 			{#if children}
@@ -86,18 +94,23 @@
 			</div>
 		</div>
 	</div>
+</div>
 
 <style>
-	.chart-container {
+	.chart-bleed {
-		/* Negative horizontal margin on mobile to use full width, reset on md+ */
+		/* Bleed exactly into the page padding on mobile (main has p-5 =
-		margin-left: -1.5rem;
+		   1.25rem) for edge-to-edge charts, and a bit past the content
-		margin-right: -1.5rem;
+		   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 {
+		.chart-bleed {
-			margin-left: 0;
+			margin-left: -1.5rem;
-			margin-right: 0;
+			margin-right: -1.5rem;
 		}
 	}
 

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;
+};

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;
+			if (event.origin !== MAPS_ORIGIN) return;
-			const { type, hash } = (event.data ?? {}) as { type?: string; hash?: string };
+			const { type, hash, domains } = (event.data ?? {}) as {
-			if (type !== 'om-maps:hash' || !hash || !MAP_HASH_RE.test(hash)) return;
+				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"

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) => {

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,7 +248,13 @@
 			</div>
 		</div>
 
-		<div class="relative" bind:clientWidth={tableWidth}>
+		<!-- 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>
@@ -275,7 +285,10 @@
 										style="width:{100 - sunsetPercent}%"
 									></div>
 									<!-- Sunrise marker + label -->
-								<div class="absolute inset-y-0 w-px bg-amber-500/70" style="left:{sunrisePercent}%">
+									<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"
 										>
@@ -294,7 +307,10 @@
 										</span>
 									</div>
 									<!-- Sunset marker + label -->
-								<div class="absolute inset-y-0 w-px bg-indigo-400/70" style="left:{sunsetPercent}%">
+									<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"
 										>
@@ -304,7 +320,9 @@
 												height="12px"
 												aria-hidden="true"
 											>
-											<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
+												<use
+													class="stroke-2"
+													xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"
 												></use>
 											</svg>
 											<span class="align-middle">{formatTime(sunTimes.sunset)}</span>
@@ -349,7 +367,9 @@
 										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}
+										class:icon-dusk={cell.isDaytime &&
+											cellData[i + 1] &&
+											!cellData[i + 1].isDaytime}
 									>
 										{@render weatherIcon(getWeatherIconName(wCode, cell.isDaytime), iconPx)}
 									</td>
@@ -487,6 +507,7 @@
 					</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;

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"