From 416555b29efbd40254e75776aafeafaf0426abda Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Thu, 4 Jun 2026 22:18:05 +0100
Subject: [PATCH 1/2] fix: hide mobile search field on blur

---
 app/components/AppHeader.vue        |  4 ++--
 app/components/Header/SearchBox.vue | 15 +++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 32fc2fb91d..1a2a8393a6 100644
--- a/app/components/AppHeader.vue
+++ b/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"
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 50ddd4f826..a048db7772 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -30,10 +30,17 @@ function clearSearch() {
 
 // Expose focus method for parent components
 const inputRef = useTemplateRef('inputRef')
-function focus() {
+function handleFocus() {
+  isSearchFocused.value = true
   inputRef.value?.focus()
+  emit('focus')
 }
-defineExpose({ focus })
+function handleBlur() {
+  isSearchFocused.value = false
+  inputRef.value?.blur()
+  emit('blur')
+}
+defineExpose({ focus: handleFocus, blur: handleBlur })
 </script>
 <template>
   <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">
@@ -60,8 +67,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="/"
           />

From 4d8385fd0735ade7b8ad567471d3bd7153721397 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Thu, 4 Jun 2026 22:34:46 +0100
Subject: [PATCH 2/2] chore: apply suggestion

---
 app/components/Header/SearchBox.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index a048db7772..e416735a58 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -32,15 +32,19 @@ function clearSearch() {
 const inputRef = useTemplateRef('inputRef')
 function handleFocus() {
   isSearchFocused.value = true
-  inputRef.value?.focus()
   emit('focus')
 }
 function handleBlur() {
   isSearchFocused.value = false
-  inputRef.value?.blur()
   emit('blur')
 }
-defineExpose({ focus: handleFocus, blur: handleBlur })
+function focus() {
+  inputRef.value?.focus()
+}
+function blur() {
+  inputRef.value?.blur()
+}
+defineExpose({ focus, blur })
 </script>
 <template>
   <search v-if="showSearchBar" :class="'flex-1 sm:max-w-md ' + inputClass">