align

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

@@ -629,6 +629,59 @@
 {/snippet}
 
 {#snippet heroActions()}
+	<!-- Same footprint and look as the model selector on the other pages, so the
+	     title row is the same height everywhere. Selection itself happens in the
+	     multi-select panel further down, so this only hands over to it. -->
+	<div class="flex w-full min-w-0 items-center gap-3 sm:w-auto">
+		<button
+			type="button"
+			class="group flex h-auto min-h-12 w-full min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-xl border-2 border-primary/35 bg-card py-1.5 ps-2.5 pe-3 text-left shadow-sm transition-colors hover:border-primary/70 hover:shadow-md sm:min-h-14 sm:w-80 sm:flex-none sm:gap-3 sm:py-2"
+			onclick={() =>
+				document.getElementById('models')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
+		>
+			<div
+				class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary sm:size-9"
+			>
+				<!-- layered-globe icon, matching the model selector -->
+				<svg
+					class="size-4.5 sm:size-5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					stroke-width="1.75"
+				>
+					<circle cx="12" cy="12" r="9" />
+					<path
+						stroke-linecap="round"
+						d="M3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18"
+					/>
+				</svg>
+			</div>
+			<div class="flex min-w-0 flex-1 flex-col items-start gap-0 overflow-hidden">
+				<span class="text-[11px] font-semibold tracking-wide text-primary uppercase">
+					{m.compare_models_heading()}
+				</span>
+				<span class="max-w-full truncate text-[13px] font-bold text-foreground sm:text-sm">
+					{params.models.length} / {modelOptions.length}
+				</span>
+				<span
+					class="hidden max-w-full truncate text-[11px] leading-tight text-muted-foreground sm:block"
+				>
+					{m.compare_models_choose()}
+				</span>
+			</div>
+			<svg
+				class="size-4 shrink-0 text-muted-foreground"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+			</svg>
+		</button>
+	</div>
+
 	<div class="lg:absolute lg:right-0 lg:top-20 z-40 hidden items-center gap-3 lg:flex">
 		<span class="text-xs text-muted-foreground">
 			{m.meteograms_zoom_hint()}