fix: hide logo on search active

2026-05-10 21:12:13 +05:30
parent e45d5eb02c
commit befcc44980
1 changed files with 12 additions and 5 deletions
@@ -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"