enhance search input

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;
             }}

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