From ca56ac78a3806de12a3ef5f609c310919f6e7bda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Wed, 19 Aug 2026 23:51:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Let=20the=20fullscreen=20mobile?=
 =?UTF-8?q?=20menu=20escape=20the=20floating=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The floating header's backdrop blur makes the pill a containing block
for fixed-position descendants, so the fullscreen mobile menu rendered
at the pill's height instead of filling the viewport. Lift the filter
while the menu is open. Fixes #3057.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 assets/css/compiled/main.css                        | 4 ++++
 assets/css/main.css                                 | 9 +++++++++
 layouts/partials/header/components/mobile-menu.html | 2 +-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 278af3da..151dfb67 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -4900,6 +4900,10 @@ 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 0930a45f..d51295d9 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -485,6 +485,15 @@ 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 09674ee1..4465f30f 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 relative flex items-center h-14 gap-4">
+<div class="mobile-header-row{{ if eq $mobileMenuStyle "fullscreen" }} mobile-menu-fullscreen{{ end }} relative flex items-center h-14 gap-4">
   {{ if hugo.IsMultilingual }}
     {{ partial "header/components/translations.html" . }}
   {{ end }}