layout shifts

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

@@ -28,6 +28,7 @@
 		fetchModelComparison
 	} from '$lib/services/weather';
 
+	import { useHeroActions } from '../../hero.svelte';
 	import { findModel, hourly, modelGroups } from '../../options';
 	import { defaultParameters } from '../../options';
 	import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
@@ -52,6 +53,8 @@
 
 	let { data }: { data: PageData } = $props();
 
+	useHeroActions(heroActions);
+
 	// the URL is the source of truth: location comes from the load function,
 	// which is also correct on hydrated prerendered pages. The persisted store
 	// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -280,28 +283,8 @@
 	});
 </script>
 
-<!-- ─── Page hero: location (matches the other forecast pages) ──────────────── -->
-
-<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
-	<div class="flex min-w-0 items-center gap-3">
-		<img
-			class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
-			src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
-			alt={location.country ?? ''}
-		/>
-		<div class="min-w-0">
-			<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
-				{location.name}
-			</h1>
-			<p class="truncate text-sm text-muted-foreground">
-				<span class="lg:hidden"
-					>{#if location.admin1}{location.admin1},
-					{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
-				>Model comparison
-			</p>
-		</div>
-	</div>
-
+<!-- the zoom controls ride in the layout's location row (see weather/+layout) -->
+{#snippet heroActions()}
 	<!-- Range / zoom controls, aligned with the title like the other pages -->
 	<div class="lg:absolute lg:right-0 lg:top-20 z-40 flex flex-wrap items-center gap-3">
 		<span class="hidden text-xs text-muted-foreground lg:inline">
@@ -345,7 +328,7 @@
 			{/each}
 		</div>
 	</div>
-</div>
+{/snippet}
 
 <!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->