layout shifts

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

@@ -17,6 +17,7 @@
 		fetchSeasonalForecast
 	} from '$lib/services/weather';
 
+	import { useHeroActions } from '../../hero.svelte';
 	import { defaultParameters } from '../../options';
 	import { getPrecipUnit } from '../../week/[location]/types';
 	import SeasonalCharts from './SeasonalCharts.svelte';
@@ -28,6 +29,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.
@@ -173,27 +176,8 @@
 	/>
 </svelte:head>
 
-<!-- Page hero -->
-<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
-				>Seasonal outlook
-			</p>
-		</div>
-	</div>
-
+<!-- the range buttons ride in the layout's location row (see weather/+layout) -->
+{#snippet heroActions()}
 	{#if result}
 		<!-- range buttons reslice the already-fetched horizon (no refetch) -->
 		<div
@@ -220,7 +204,7 @@
 			{/each}
 		</div>
 	{/if}
-</div>
+{/snippet}
 
 <!-- What a seasonal forecast is (and is not): without this the daily-looking
      charts invite over-reading. -->