overlay

src/lib/components/navigation/header.svelte

@@ -41,6 +41,13 @@
 		if (flagEl && !flagEl.src.endsWith(src)) flagEl.src = src;
 	});
 
+	// Built as a string rather than inline markup: the pieces are optional, and
+	// separators spelled out in the template lose their spacing to Svelte's
+	// whitespace trimming ("Canton of Schwyz,Switzerland").
+	let locationRegion = $derived([location?.admin1, location?.country].filter(Boolean).join(', '));
+	// the pill ellipses, so the full name still has to be readable somewhere
+	let locationLine = $derived([location?.name, locationRegion].filter(Boolean).join(' · '));
+
 	const themeCycle: Theme[] = ['system', 'light', 'dark'];
 	const themeTitles: Record<Theme, () => string> = {
 		system: m.theme_follow_system,
@@ -99,8 +106,10 @@
 
 	<!-- Current location display -->
 	{#if location}
+		<!-- min-w-0 + a ceiling so a long "Sant Pere de Ribes, Catalonia, Spain"
+		     ellipses inside the pill instead of pushing the search box off centre -->
 		<div
-			class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex"
+			class="hidden min-w-0 max-w-70 items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex xl:max-w-96"
 		>
 			<img
 				bind:this={flagEl}
@@ -109,13 +118,10 @@
 				alt={location.country}
 			/>
 			<!-- full location (desktop); the page hero carries it on smaller screens -->
-			<span class="whitespace-nowrap text-sm font-semibold text-foreground">
+			<span class="min-w-0 truncate text-sm font-semibold text-foreground" title={locationLine}>
 				{location.name}
-				{#if location.admin1 || location.country}
-					<span class="font-normal text-muted-foreground">
-						· {#if location.admin1}{location.admin1},&nbsp;
-						{/if}{location.country ?? ''}
-					</span>
+				{#if locationRegion}
+					<span class="font-normal text-muted-foreground">· {locationRegion}</span>
 				{/if}
 			</span>
 		</div>