diff --git a/assets/css/frontend/header-userbox.css b/assets/css/frontend/header-userbox.css
index df0ebccf..94c0ff7e 100644
--- a/assets/css/frontend/header-userbox.css
+++ b/assets/css/frontend/header-userbox.css
@@ -110,12 +110,16 @@
 /* Keep the drop-down search panel above a fixed header (z-index: 999). */
 .navbar-search {
   z-index: 1001;
+  opacity: 0;
+  transform: translate3d(0, -24px, 0);
+  transition: transform .24s ease, opacity .18s ease, visibility 0s linear .24s;
+  will-change: transform, opacity;
 }
 
-.navbar-search > .container {
-  position: relative;
-  max-height: calc(100vh - 40px);
-  overflow-y: auto;
+.navbar-search.show {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  transition-delay: 0s;
 }
 
 .navbar-search .search-close-box {
diff --git a/tests/widget-system/page-display-contract.test.cjs b/tests/widget-system/page-display-contract.test.cjs
index 25cb555c..b1541e84 100644
--- a/tests/widget-system/page-display-contract.test.cjs
+++ b/tests/widget-system/page-display-contract.test.cjs
@@ -228,8 +228,10 @@ test('desktop header actions share one row without generic button masks', () =>
 })
 
 test('search dropdown clears the fixed header and closes from the panel lower-right', () => {
-  assert.match(headerCss, /\.navbar-search\s*\{[^}]*z-index:\s*1001;/s)
+  assert.match(headerCss, /\.navbar-search\s*\{[^}]*z-index:\s*1001;[^}]*transform:\s*translate3d\(0, -24px, 0\);[^}]*transition:\s*transform \.24s ease, opacity \.18s ease, visibility 0s linear \.24s;/s)
+  assert.match(headerCss, /\.navbar-search\.show\s*\{[^}]*opacity:\s*1;[^}]*transform:\s*translate3d\(0, 0, 0\);/s)
   assert.doesNotMatch(headerCss, /\.navbar-search\s*\{[^}]*height:\s*100%/s)
+  assert.doesNotMatch(headerCss, /\.navbar-search > \.container\s*\{[^}]*overflow-y:\s*auto/s)
   assert.match(headerCss, /\.navbar-search \.search-close-box\s*\{[^}]*display:\s*flex;[^}]*justify-content:\s*flex-end;[^}]*margin:\s*16px auto 0;/s)
   assert.doesNotMatch(headerCss, /\.navbar-search \.search-close-box\s*\{[^}]*position:\s*fixed/s)
   assert.ok(headerSearch.indexOf('echo $remote') < headerSearch.indexOf('search-close-box'))