refactor

src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+
 	import Header from '$lib/components/navigation/header.svelte';
 	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
 
@@ -8,6 +10,9 @@
 
 	let { children } = $props();
 
+	// the maps page embeds a full-bleed map: no padding, no scrolling
+	let fullBleed = $derived($page.url.pathname.startsWith('/weather/maps'));
+
 	let sidebarCollapsed = $state(false);
 	let mobileMenuOpen = $state(false);
 
@@ -55,7 +60,9 @@
 	<div class="flex min-w-0 flex-1 flex-col h-full">
 		<Header onMenuToggle={toggleMobileMenu} />
 
-		<main class="flex-1 overflow-y-auto p-5 md:px-8 md:py-6">
+		<main
+			class={fullBleed ? 'flex-1 overflow-hidden' : 'flex-1 overflow-y-auto p-5 md:px-8 md:py-6'}
+		>
 			{@render children()}
 		</main>
 	</div>