From a7d99261cfbfe98cc3c3b2e9598d2f7213fe6bb1 Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Thu, 21 May 2026 19:57:30 +0200
Subject: [PATCH] fix(ui): reserve search clear button space

Typing the first character into the launcher search field used to insert the
clear button into the flex row, which widened the field after focus. The clear
button now stays mounted in the row so its slot is part of the empty field's
layout, while the empty state hides and disables it.

Users now get the wider steady-state search width immediately, and the control
does not jump when the clear affordance becomes visible.

Test Plan:
- git diff --check
- just frontend-test
- just build

Refs: user-reported search field jump
---
 .../src/components/topbar/SearchField.tsx     | 27 ++++++++++---------
 .../src/styles/launcher.css                   |  4 +++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx b/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
index 3af0e7d..88daf08 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/topbar/SearchField.tsx
@@ -13,6 +13,7 @@ interface Props {
  */
 export const SearchField = ({ value, onChange }: Props) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
+    const clearClassName = value ? 'search-clear' : 'search-clear is-hidden';
 
     useEffect(() => {
         const onKey = (e: KeyboardEvent) => {
@@ -51,19 +52,19 @@ export const SearchField = ({ value, onChange }: Props) => {
                 }}
                 spellCheck={false}
             />
-            {value && (
-                <button
-                    className="search-clear"
-                    type="button"
-                    aria-label="Clear search"
-                    onClick={() => {
-                        onChange('');
-                        inputRef.current?.focus();
-                    }}
-                >
-                    <Icon.clearCircle />
-                </button>
-            )}
+            <button
+                className={clearClassName}
+                type="button"
+                aria-label="Clear search"
+                aria-hidden={value ? undefined : true}
+                disabled={!value}
+                onClick={() => {
+                    onChange('');
+                    inputRef.current?.focus();
+                }}
+            >
+                <Icon.clearCircle />
+            </button>
             <span className="search-kbd">/</span>
         </div>
     );
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index 7d0dadf..48b9e12 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -304,6 +304,10 @@
   color: var(--t-1);
   background: rgba(255, 255, 255, 0.08);
 }
+.search-clear.is-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
 .search-kbd {
   display: inline-grid;
   place-items: center;