crossfade

src/routes/weather/week/[location]/+page.svelte

@@ -6,6 +6,7 @@
 
 	import { page } from '$app/stores';
 
+	import { reportPageReady } from '$lib/stores/page-transition.svelte';
 	import {
 		storedChartLayout,
 		storedLocation,
@@ -14,8 +15,6 @@
 		storedVariablePrefs
 	} from '$lib/stores/settings';
 
-	import { reportPageReady } from '$lib/stores/page-transition.svelte';
-
 	import { formatZoned } from '$lib/utils/date';
 	import { daySwap, runDayTransition } from '$lib/utils/day-swap';
 	import { buildLocationRoute } from '$lib/utils/location';
@@ -66,6 +65,19 @@
 
 	let variableSidebarOpen = $state(false);
 
+	// Meteogram canvases are shorter on phones, where a 300px plot eats most of
+	// the viewport. The placeholder below uses the same number, so the reserved
+	// space still matches exactly.
+	let narrowViewport = $state(false);
+	onMount(() => {
+		const mq = window.matchMedia('(max-width: 767px)');
+		const apply = () => (narrowViewport = mq.matches);
+		apply();
+		mq.addEventListener('change', apply);
+		return () => mq.removeEventListener('change', apply);
+	});
+	let chartHeight = $derived(narrowViewport ? 215 : 300);
+
 	// Number of meteogram panels: reserves the chart area height before data
 	// arrives (no layout shift)
 	let enabledChartCount = $derived($storedChartLayout.filter((p) => p.variables.length > 0).length);
@@ -418,7 +430,13 @@
 
 			{#if fetchedHourly}
 				<div class="day-region-charts" use:daySwap={selectedDayKey}>
-					<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
+					<MeteogramCharts
+						data={fetchedHourly}
+						{selectedDay}
+						units={params}
+						{loading}
+						{chartHeight}
+					/>
 				</div>
 			{:else}
 				<!-- reserve the exact chart area height before the first fetch resolves,
@@ -431,7 +449,7 @@
 							<div class="h-7 w-24 animate-pulse rounded-lg bg-muted"></div>
 						</div>
 					</div>
-					<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
+					<ChartContainer loading chartCount={enabledChartCount || 1} {chartHeight} />
 				</section>
 			{/if}
 		</div>