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/2] 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 6796554f4..a2991eb01 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/2] [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 a2991eb01..e10bb1392 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>