layout shifts

src/lib/components/location/location-search.svelte

@@ -48,6 +48,12 @@
 		);
 	}
 
+	/** Drop a single entry from the recent list (favourites are unaffected). */
+	function removeRecent(loc: GeoLocation) {
+		const key = locationKey(loc);
+		storedRecentLocations.update((list) => list.filter((l) => locationKey(l) !== key));
+	}
+
 	function toggleFavorite(loc: GeoLocation) {
 		const key = locationKey(loc);
 		storedFavoriteLocations.update((list) =>
@@ -126,7 +132,7 @@
 	})();
 </script>
 
-{#snippet locationRow(location: GeoLocation)}
+{#snippet locationRow(location: GeoLocation, removable: boolean)}
 	{@const fav = favKeys.has(locationKey(location))}
 	<div
 		class="group flex items-center rounded-md border border-transparent transition-[background,border-color] duration-150 hover:border-border hover:bg-accent"
@@ -172,6 +178,18 @@
 				/>
 			</svg>
 		</button>
+		{#if removable}
+			<button
+				class="mr-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/50 hover:bg-background hover:text-destructive"
+				onclick={() => removeRecent(location)}
+				aria-label="Remove {location.name} from recent locations"
+				title="Remove from recent"
+			>
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+					<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+				</svg>
+			</button>
+		{/if}
 	</div>
 {/snippet}
 
@@ -262,7 +280,7 @@
 								</div>
 								<div class="space-y-0.5">
 									{#each $storedFavoriteLocations as loc (locationKey(loc))}
-										{@render locationRow(loc)}
+										{@render locationRow(loc, false)}
 									{/each}
 								</div>
 							{/if}
@@ -276,7 +294,7 @@
 								</div>
 								<div class="space-y-0.5">
 									{#each recentToShow as loc (locationKey(loc))}
-										{@render locationRow(loc)}
+										{@render locationRow(loc, true)}
 									{/each}
 								</div>
 							{/if}
@@ -305,7 +323,7 @@
 					{:else if results.results && results.results.length > 0}
 						<div class="space-y-0.5">
 							{#each results.results as location, i (i)}
-								{@render locationRow(location)}
+								{@render locationRow(location, false)}
 							{/each}
 						</div>
 					{:else if results.results}