diff --git a/components/header-search.tsx b/components/header-search.tsx
index c1228202..af70af9b 100644
--- a/components/header-search.tsx
+++ b/components/header-search.tsx
@@ -104,11 +104,18 @@ export function HeaderSearchButton() {
         {expanded ? (
           <motion.div
             key="search-input"
-            initial={{ width: 36, opacity: 0.8 }}
-            animate={{ width: 280, opacity: 1 }}
-            exit={{ width: 36, opacity: 0.8 }}
-            transition={{ type: "spring", damping: 25, stiffness: 350 }}
-            className="flex items-center gap-2 h-9 rounded-lg border border-border bg-background px-3 overflow-hidden"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            className={cn(
+              // Mobile: cover the entire header (absolutely positioned)
+              "max-md:fixed max-md:inset-x-4 max-md:top-3 max-md:z-30",
+              // Desktop: inline at 280px wide
+              "md:relative md:w-[280px]",
+              "flex items-center gap-2 h-9 rounded-lg border border-border bg-background px-3 overflow-hidden",
+              "max-md:shadow-lg",
+            )}
           >
             <button
               type="button"