From aa52338289d4d5aa7e04c2b59398df87c59021ff Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Thu, 27 Aug 2026 21:58:03 +0800
Subject: [PATCH] fix: mobile menu wrong height caused by new stacking context
 from backdrop-blur

---
 assets/css/compiled/main.css                        |  6 +-----
 assets/css/main.css                                 | 11 +----------
 layouts/partials/header/components/mobile-menu.html |  4 ++--
 layouts/partials/header/floating.html               |  8 ++++++--
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 151dfb67..17721ab4 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -4877,7 +4877,7 @@ pre {
     }
   }
 }
-body:has(#mobile-menu-toggle:checked) {
+body:has(#mobile-menu-toggle:checked):not(:has(#mobile-menu-dialog.mobile-menu-style-dropdown)) {
   overflow: hidden;
 }
 @media (min-width: 853px) {
@@ -4900,10 +4900,6 @@ body:has(#mobile-menu-toggle:checked) {
   visibility: hidden;
   transition: visibility 0.3s, opacity 0.3s ease-in-out;
 }
-header > div:has(.mobile-menu-fullscreen #mobile-menu-toggle:checked) {
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
 .nested-menu:nth-last-child(-n + 3) .menuhide, .mobile-header-row .menuhide {
   inset-inline-end: 0;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index d51295d9..4971cc5e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -451,7 +451,7 @@ pre {
 }
 
 /* Prevent body scroll when mobile menu is open */
-body:has(#mobile-menu-toggle:checked) {
+body:has(#mobile-menu-toggle:checked):not(:has(#mobile-menu-dialog.mobile-menu-style-dropdown)) {
   overflow: hidden;
 }
 
@@ -485,15 +485,6 @@ body:has(#mobile-menu-toggle:checked) {
     opacity 0.3s ease-in-out;
 }
 
-/* A backdrop-filter turns the header pill into a containing block for
-   position:fixed descendants, which would trap the fullscreen mobile menu
-   inside it. Lift the filter while that menu is open — the fullscreen
-   overlay covers the header anyway, so the change is invisible. */
-header > div:has(.mobile-menu-fullscreen #mobile-menu-toggle:checked) {
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-}
-
 /* Dropdowns near the end of the bar open leftward so they stay on screen */
 .nested-menu:nth-last-child(-n + 3) .menuhide,
 .mobile-header-row .menuhide {
diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html
index 4465f30f..8033deeb 100644
--- a/layouts/partials/header/components/mobile-menu.html
+++ b/layouts/partials/header/components/mobile-menu.html
@@ -1,5 +1,5 @@
 {{ $mobileMenuStyle := .Site.Params.header.mobileMenuStyle | default "fullscreen" }}
-<div class="mobile-header-row{{ if eq $mobileMenuStyle "fullscreen" }} mobile-menu-fullscreen{{ end }} relative flex items-center h-14 gap-4">
+<div class="mobile-header-row relative flex items-center h-14 gap-4">
   {{ if hugo.IsMultilingual }}
     {{ partial "header/components/translations.html" . }}
   {{ end }}
@@ -55,7 +55,7 @@
       style="scrollbar-gutter: stable;"
       class="z-50 invisible overflow-y-auto opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100
       {{ if eq $mobileMenuStyle "dropdown" }}
-        absolute end-0 top-[calc(100%+0.75rem)] z-10 w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl border border-neutral-200/80 bg-neutral/95 p-5 shadow-2xl shadow-neutral-900/20 dark:border-neutral-700/80 dark:bg-neutral-800/95
+        mobile-menu-style-dropdown absolute end-0 top-[calc(100%+0.75rem)] z-10 w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl border border-neutral-200/80 bg-neutral/95 p-5 shadow-2xl shadow-neutral-900/20 dark:border-neutral-700/80 dark:bg-neutral-800/95
       {{ else }}
         fixed inset-0 px-6 py-20 bg-neutral-50/97 dark:bg-neutral-900/99
       {{ end }}
diff --git a/layouts/partials/header/floating.html b/layouts/partials/header/floating.html
index 378c038b..7446cca2 100644
--- a/layouts/partials/header/floating.html
+++ b/layouts/partials/header/floating.html
@@ -1,6 +1,10 @@
 <div class="min-h-32"></div>
 <div class="fixed inset-x-0 top-3 z-100 px-3 sm:top-5 sm:px-6">
-  <div class="mx-auto max-w-7xl rounded-2xl border border-neutral-200/80 bg-neutral/60 px-3 shadow-lg shadow-neutral-900/5 backdrop-blur-xl dark:border-neutral-700/80 dark:bg-neutral-800/60 [&_img.logo]:max-h-10 [&_img.logo]:max-w-10">
-    {{ partial "header/basic.html" . }}
+  <div
+    class="relative mx-auto max-w-7xl rounded-2xl border border-neutral-200/80 shadow-lg shadow-neutral-900/5 dark:border-neutral-700/80 [&_img.logo]:max-h-10 [&_img.logo]:max-w-10">
+    <div class="absolute inset-0 -z-10 rounded-2xl bg-neutral/60 backdrop-blur-xl dark:bg-neutral-800/60"></div>
+    <div class="px-3">
+      {{ partial "header/basic.html" . }}
+    </div>
   </div>
 </div>