overlay

src/routes/weather/+layout.svelte

@@ -42,6 +42,11 @@
 	let subtitle = $derived(
 		SUBTITLES.find(([prefix]) => routePath($page.url.pathname).startsWith(prefix))?.[1]?.() ?? null
 	);
+
+	// Joined here rather than in the markup: Svelte trims the whitespace around a
+	// line break, so a separator written as "{admin1},\n{country}" renders as
+	// "Canton of Schwyz,Switzerland".
+	let region = $derived([location?.admin1, location?.country].filter(Boolean).join(', '));
 </script>
 
 {#if subtitle && location}
@@ -57,10 +62,8 @@
 					{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
-					>{subtitle}
+					{#if region}<span class="lg:hidden">{region}<span class="mx-1 opacity-50">·</span></span
+						>{/if}{subtitle}
 				</p>
 			</div>
 		</div>