From d917b3ea7d5ccb08d92918b623a025863bd5b494 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sun, 10 May 2026 22:17:38 +0530
Subject: [PATCH] enhance search input

---
 components/header-search.tsx | 5 +++--
 components/page-header.tsx   | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/header-search.tsx b/components/header-search.tsx
index bfff82d0..60beee75 100644
--- a/components/header-search.tsx
+++ b/components/header-search.tsx
@@ -46,7 +46,7 @@ export function HeaderSearchButton({
   // Focus input when expanded
   useEffect(() => {
     if (expanded && inputRef.current) {
-      const timer = setTimeout(() => inputRef.current?.focus(), 80);
+      const timer = setTimeout(() => inputRef.current?.focus(), 150);
       return () => clearTimeout(timer);
     }
   }, [expanded]);
@@ -142,13 +142,14 @@ export function HeaderSearchButton({
           className={cn(
             "flex items-center gap-2 h-12 md:h-10 rounded-lg border border-border bg-background px-3 overflow-hidden",
             "max-md:w-full",
-            "md:w-100!",
+            "md:max-w-100",
           )}
         >
           <input
             ref={inputRef}
             type="text"
             defaultValue=""
+            autoFocus
             onChange={(e) => {
               queryRef.current = e.target.value;
             }}
diff --git a/components/page-header.tsx b/components/page-header.tsx
index facf0e24..5c2ae151 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -76,8 +76,8 @@ export function PageHeader({
         {/* Actions — expands to fill width on mobile when search is active */}
         <div
           className={cn(
-            "shrink-0 pt-1 flex items-center gap-1.5",
-            searchExpanded && "max-md:flex-1 max-md:min-w-0",
+            "pt-1 flex items-center gap-1.5",
+            searchExpanded ? "max-md:flex-1 max-md:min-w-0" : "shrink-0",
           )}
         >
           <HeaderSearchButton