fix: hide mobile search field on blur (npmx-dev#2852)

Author: alexdln

app/components/AppHeader.vue

@@ -327,7 +327,7 @@ useShortcuts({
       <!-- Mobile: Search button (expands search) -->
       <ButtonBase
         type="button"
-        class="sm:hidden ms-auto"
+        class="sm:hidden ms-auto py-2.5!"
         :aria-label="$t('nav.tap_to_search')"
         :aria-expanded="showMobileMenu"
         @click="expandMobileSearch"
@@ -338,7 +338,7 @@ useShortcuts({
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
-        class="sm:hidden"
+        class="sm:hidden py-2.5!"
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"

app/components/Header/SearchBox.vue

@@ -30,10 +30,21 @@ function clearSearch() {
 
 // Expose focus method for parent components
 const inputRef = useTemplateRef('inputRef')
+function handleFocus() {
+  isSearchFocused.value = true
+  emit('focus')
+}
+function handleBlur() {
+  isSearchFocused.value = false
+  emit('blur')
+}
 function focus() {
   inputRef.value?.focus()
 }
-defineExpose({ focus })
+function blur() {
+  inputRef.value?.blur()
+}
+defineExpose({ focus, blur })
 </script>
 <template>
   <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
@@ -60,8 +71,8 @@ defineExpose({ focus })
             :placeholder="$t('search.placeholder')"
             no-correct
             class="w-full min-w-25 ps-7 pe-8"
-            @focus="isSearchFocused = true"
-            @blur="isSearchFocused = false"
+            @focus="handleFocus"
+            @blur="handleBlur"
             size="sm"
             ariaKeyshortcuts="/"
           />