layout shifts

src/routes/weather/14-day/[location]/+page.svelte

@@ -15,6 +15,7 @@
 		fetchEnsembleForecast
 	} from '$lib/services/weather';
 
+	import { useHeroActions } from '../../hero.svelte';
 	import { defaultParameters, ensembleModelGroups } from '../../options';
 	import ModelSelector from '../../week/[location]/ModelSelector.svelte';
 
@@ -36,6 +37,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.
@@ -272,28 +275,8 @@
 	});
 </script>
 
-<!-- ─── Page hero: location + ensemble model selection ─────────────────────── -->
-
-<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
-				>14-day ensemble forecast
-			</p>
-		</div>
-	</div>
-
+<!-- the ensemble picker rides in the layout's location row (see weather/+layout) -->
+{#snippet heroActions()}
 	<div class="lg:absolute lg:right-0 lg:top-0 flex w-full items-center gap-3 sm:w-auto">
 		<ModelSelector
 			selectedModel={params.models?.[0] ?? 'ncep_gefs_seamless'}
@@ -305,7 +288,7 @@
 			}}
 		/>
 	</div>
-</div>
+{/snippet}
 
 <!-- ─── Chart Area ─────────────────────────────────────────────────────────── -->