From 6af5a4966f5553641f3181e864d49ab27b45bd5f Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Sun, 12 Apr 2026 22:24:58 +0500
Subject: [PATCH] fix: remove redundant X icons from SearchModal search input

Removed the custom clear button (shown when query is non-empty) and
suppressed the browser-native webkit search cancel button via CSS.
Only the single Cancel button remains, avoiding the double/triple X
clutter on wider screens.
---
 ui/src/lib/components/SearchModal.svelte | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/ui/src/lib/components/SearchModal.svelte b/ui/src/lib/components/SearchModal.svelte
index e2725a1..46efe2e 100644
--- a/ui/src/lib/components/SearchModal.svelte
+++ b/ui/src/lib/components/SearchModal.svelte
@@ -223,26 +223,13 @@
 				bind:value={query}
 				type="search"
 				placeholder="Search books, authors, genres…"
-				class="flex-1 bg-transparent text-(--color-text) placeholder:text-(--color-muted) text-base focus:outline-none min-w-0"
+				class="flex-1 bg-transparent text-(--color-text) placeholder:text-(--color-muted) text-base focus:outline-none min-w-0 [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
 				onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); submitQuery(); } }}
 				autocomplete="off"
 				autocorrect="off"
 				spellcheck={false}
 			/>
 
-			{#if query}
-				<button
-					type="button"
-					onclick={() => { query = ''; inputEl?.focus(); }}
-					class="shrink-0 p-1 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-					aria-label="Clear search"
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-					</svg>
-				</button>
-			{/if}
-
 			<button
 				type="button"
 				onclick={onclose}