fix: mobile keyboard opens when tapping search (#457)

iOS/mobile browsers only open keyboard when focus() is called directly
in a user gesture handler. Previously, focus happened in a Svelte $effect
after state change, which broke the gesture chain.

Fix: Always render SearchModal (hidden via CSS), register input ref with
search state, and focus directly in search.open() before state change.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[e-mail]>

frontend/src/lib/components/SearchModal.svelte

···
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import { search, type SearchResult } from '$lib/search.svelte';
-	import { fade } from 'svelte/transition';
 	import { onMount, onDestroy } from 'svelte';
 
 	let inputRef: HTMLInputElement | null = $state(null);
···
 		}
 	});
 
-	// focus input when modal opens
+	// register input ref with search state for direct focus (mobile keyboard fix)
 	$effect(() => {
-		if (search.isOpen && inputRef && browser) {
-			// small delay to ensure modal is rendered
-			window.requestAnimationFrame(() => {
-				inputRef?.focus();
-			});
+		if (inputRef) {
+			search.setInputRef(inputRef);
 		}
 	});
 
···
 	});
 </script>
 
-{#if search.isOpen}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div
-		class="search-backdrop"
-		onclick={handleBackdropClick}
-		transition:fade={{ duration: 150 }}
-	>
+<!-- always render for mobile keyboard focus, use CSS to show/hide -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div
+	class="search-backdrop"
+	class:open={search.isOpen}
+	onclick={handleBackdropClick}
+>
 		<div class="search-modal" role="dialog" aria-modal="true" aria-label="search">
 			<div class="search-input-wrapper">
 				<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
···
 			{/if}
 		</div>
 	</div>
-{/if}
 
 <style>
 	.search-backdrop {
···
 		align-items: flex-start;
 		justify-content: center;
 		padding-top: 15vh;
+		/* hidden by default */
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+		transition: opacity 0.15s, visibility 0.15s;
+	}
+
+	.search-backdrop.open {
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
 	}
 
 	.search-modal {

frontend/src/lib/search.svelte.ts

···
 	error = $state<string | null>(null);
 	selectedIndex = $state(0);
 
+	// reference to input element for direct focus (mobile keyboard workaround)
+	inputRef: HTMLInputElement | null = null;
+
 	// debounce timer
 	private searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
+	setInputRef(el: HTMLInputElement | null) {
+		this.inputRef = el;
+	}
+
 	open() {
+		// focus input FIRST (before state change) for mobile keyboard to open
+		// iOS/mobile browsers only open keyboard when focus() is in direct user gesture
+		if (this.inputRef) {
+			this.inputRef.focus();
+		}
 		this.isOpen = true;
 		this.query = '';
 		this.results = [];