From f8c38738f479f4a6b67ba8938ff87e7bdf4f1dcc Mon Sep 17 00:00:00 2001
From: Sai Kumar Kola <39924419+SahulKola@users.noreply.github.com>
Date: Tue, 3 Mar 2026 15:41:49 +0000
Subject: [PATCH 1/4] fix: add clear button in search field (mobile view) -
 #1881

---
 app/components/Header/SearchBox.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index 6796554f48..a2991eb016 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -17,11 +17,17 @@ const showSearchBar = computed(() => {
 })
 
 const { model: searchQuery, startSearch } = useGlobalSearch('header')
+const hasSearchQuery = computed(() => searchQuery.value.trim().length > 0)
 
 function handleSubmit() {
   startSearch()
 }
 
+function clearSearch() {
+  searchQuery.value = ''
+  inputRef.value?.focus()
+}
+
 // Expose focus method for parent components
 const inputRef = useTemplateRef('inputRef')
 function focus() {
@@ -52,14 +58,23 @@ defineExpose({ focus })
             name="q"
             :placeholder="$t('search.placeholder')"
             no-correct
-            class="w-full min-w-25 ps-7"
+            class="w-full min-w-25 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
             size="small"
           />
+          <button
+            v-if="hasSearchQuery"
+            type="button"
+            :aria-label="$t('common.close')"
+            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            @click="clearSearch"
+          >
+            <span class="i-lucide:circle-x h-4 w-4" aria-hidden="true" />
+          </button>
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>
       </div>
     </form>
   </search>
-</template>
+</template>
\ No newline at end of file

From 8bcbeed135b3afe543f16d5193b733b7e6ad245e Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Tue, 3 Mar 2026 15:44:21 +0000
Subject: [PATCH 2/4] [autofix.ci] apply automated fixes

---
 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 a2991eb016..e10bb13926 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -77,4 +77,4 @@ defineExpose({ focus })
       </div>
     </form>
   </search>
-</template>
\ No newline at end of file
+</template>

From 301e56cf12c80d8da4fcd0b00e935ebd5f9acd2b Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Thu, 5 Mar 2026 03:57:42 +0000
Subject: [PATCH 3/4] feat: update accessibility and make visible only on
 focus/hover

---
 app/components/Header/SearchBox.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index e10bb13926..aa71ae63cb 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -67,10 +67,12 @@ defineExpose({ focus })
             v-if="hasSearchQuery"
             type="button"
             :aria-label="$t('common.close')"
-            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            class="absolute inset-ie-2 h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent group-focus-within:flex group-hover:inline-flex hidden"
             @click="clearSearch"
+            aria-hidden="true"
+            tabindex="-1"
           >
-            <span class="i-lucide:circle-x h-4 w-4" aria-hidden="true" />
+            <span class="i-lucide:circle-x h-4 w-4" />
           </button>
           <button type="submit" class="sr-only">{{ $t('search.button') }}</button>
         </div>

From fd2a652520cfd150f9ffa7a841ed61b29cdc4821 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <ghostdevbusiness@gmail.com>
Date: Thu, 5 Mar 2026 03:59:38 +0000
Subject: [PATCH 4/4] Update app/components/Header/SearchBox.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Header/SearchBox.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
index aa71ae63cb..8aeaecd158 100644
--- a/app/components/Header/SearchBox.vue
+++ b/app/components/Header/SearchBox.vue
@@ -66,7 +66,6 @@ defineExpose({ focus })
           <button
             v-if="hasSearchQuery"
             type="button"
-            :aria-label="$t('common.close')"
             class="absolute inset-ie-2 h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent group-focus-within:flex group-hover:inline-flex hidden"
             @click="clearSearch"
             aria-hidden="true"