From ba860a9a61adc547098550d0cf77181aec05f33b Mon Sep 17 00:00:00 2001
From: epifaniofrancisco <epifaniofrancisco03@gmail.com>
Date: Tue, 10 Mar 2026 10:24:18 +0100
Subject: [PATCH 1/2] fix(ui): add close functionality for search input

Adds multiple ways to dismiss the expanded mobile search on subpages:
- Click outside the header to close
- Press Escape key to close
- Click the X close button

Fixes #1881
---
 app/components/AppHeader.vue | 52 +++++++++++++++++++++++++++++-------
 i18n/locales/en.json         |  3 ++-
 i18n/schema.json             |  3 +++
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 5febbd6fa7..4b4dcb4f70 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
 import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
@@ -143,6 +144,7 @@ const route = useRoute()
 const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
+const headerRef = useTemplateRef('headerRef')
 
 // On search page, always show search expanded on mobile
 const isOnHomePage = computed(() => route.name === 'index')
@@ -156,6 +158,21 @@ function expandMobileSearch() {
   })
 }
 
+function collapseMobileSearch() {
+  if (!isMobile.value) return
+  if (isOnSearchPage.value) return
+  isSearchExpandedManually.value = false
+  if (document.activeElement instanceof HTMLElement) {
+    document.activeElement.blur()
+  }
+}
+
+onClickOutside(headerRef, () => {
+  if (isMobile.value && isSearchExpanded.value && !isOnSearchPage.value) {
+    collapseMobileSearch()
+  }
+})
+
 watch(
   isOnSearchPage,
   visible => {
@@ -171,13 +188,6 @@ watch(
 
 function handleSearchBlur() {
   showFullSearch.value = false
-  // Collapse expanded search on mobile after blur (with delay for click handling)
-  // But don't collapse if we're on the search page
-  if (isMobile.value && !isOnSearchPage.value) {
-    setTimeout(() => {
-      isSearchExpandedManually.value = false
-    }, 150)
-  }
 }
 
 function handleSearchFocus() {
@@ -200,10 +210,22 @@ onKeyStroke(
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  e =>
+    isKeyWithoutModifiers(e, 'Escape') &&
+    isMobile.value &&
+    isSearchExpanded.value &&
+    !isOnSearchPage.value,
+  e => {
+    e.preventDefault()
+    collapseMobileSearch()
+  },
+)
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 border-b border-border">
+  <header ref="headerRef" class="sticky top-0 z-50 border-b border-border">
     <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
@@ -301,15 +323,25 @@ onKeyStroke(
 
       <!-- Mobile: Search button (expands search) -->
       <ButtonBase
+        v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
         class="sm:hidden ms-auto"
         :aria-label="$t('nav.tap_to_search')"
-        :aria-expanded="showMobileMenu"
+        :aria-expanded="isSearchExpanded"
         @click="expandMobileSearch"
-        v-if="!isSearchExpanded && !isOnHomePage"
         classicon="i-lucide:search"
       />
 
+      <!-- Mobile: Close search button (collapses search) -->
+      <ButtonBase
+        v-if="isSearchExpanded && !isOnSearchPage"
+        type="button"
+        class="sm:hidden flex-shrink-0"
+        :aria-label="$t('nav.close_search')"
+        @click="collapseMobileSearch"
+        classicon="i-lucide:x"
+      />
+
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7a7e3dbf43..4f6c876bd5 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -83,7 +83,8 @@
     "mobile_menu": "Navigation menu",
     "open_menu": "Open menu",
     "links": "Links",
-    "tap_to_search": "Tap to search"
+    "tap_to_search": "Tap to search",
+    "close_search": "Close search"
   },
   "blog": {
     "title": "Blog",
diff --git a/i18n/schema.json b/i18n/schema.json
index 68cefe9a21..19555b631b 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -255,6 +255,9 @@
         },
         "tap_to_search": {
           "type": "string"
+        },
+        "close_search": {
+          "type": "string"
         }
       },
       "additionalProperties": false

From 99be7a41614de87b0cd4180b421bd657dc609106 Mon Sep 17 00:00:00 2001
From: epifaniofrancisco <epifaniofrancisco03@gmail.com>
Date: Tue, 10 Mar 2026 10:25:59 +0100
Subject: [PATCH 2/2] fix(ui): align search input height with header buttons

Forces the search input to have the same height as the header
buttons on mobile (h-8) and small screens (h-9) for visual
consistency.
---
 app/components/Header/SearchBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 9a01ebf9fe..838f03e07a 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -59,7 +59,7 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             no-correct
-            class="w-full min-w-25 ps-7 pe-8"
+            class="w-full min-w-25 h-8 sm:h-9 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"