From e6ab5eca57bb09e5758eda4dccfae3fe5b6db423 Mon Sep 17 00:00:00 2001
From: Kam <erkamyaman35@gmail.com>
Date: Sat, 2 May 2026 16:44:19 +0300
Subject: [PATCH] fix(docs-infra): keep mobile nav drawers usable on small
 screens

On phones, opening the primary-nav drawer left the page behind it scrollable, and the secondary drawer's mask had no explicit height so long submenus got clipped above the page content. Lock the page with overflow: clip on :host:has(.adev-nav-primary--open) for phone-only (preserves the primary nav's sticky context), give the secondary mask height: 100dvh on tablet-landscape-down so it fills the visible viewport, and align the nav-list :host height to 100dvh too so its inner scroll matches.

(cherry picked from commit 441a00d665b89fabaa095ec417aa661cc72fcd23)
---
 .../navigation-list/navigation-list.component.scss         | 2 +-
 adev/src/app/app.component.scss                            | 7 +++++++
 .../secondary-navigation.component.scss                    | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/adev/shared-docs/components/navigation-list/navigation-list.component.scss b/adev/shared-docs/components/navigation-list/navigation-list.component.scss
index 16c11ab97d3..c2eb98aaf97 100644
--- a/adev/shared-docs/components/navigation-list/navigation-list.component.scss
+++ b/adev/shared-docs/components/navigation-list/navigation-list.component.scss
@@ -6,7 +6,7 @@
   list-style: none;
   overflow-y: auto;
   overflow-x: hidden;
-  height: 100vh;
+  height: 100dvh;
   padding: 0;
   margin: 0;
   padding-block: 1.5rem;
diff --git a/adev/src/app/app.component.scss b/adev/src/app/app.component.scss
index 36b3a2282c9..b4760cd53cc 100644
--- a/adev/src/app/app.component.scss
+++ b/adev/src/app/app.component.scss
@@ -40,6 +40,13 @@
     }
   }
 
+  // Lock the page behind the mobile primary-nav drawer. `clip` preserves the primary nav's sticky context.
+  @include mq.for-phone-only {
+    &:has(.adev-nav-primary--open) {
+      overflow: clip;
+    }
+  }
+
   &:has(.adev-home) {
     .adev-nav {
       width: 0;
diff --git a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss
index fd655ebcd78..a793427d9db 100644
--- a/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss
+++ b/adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.scss
@@ -35,6 +35,7 @@
 
   @include mq.for-tablet-landscape-down {
     position: absolute;
+    height: 100dvh;
   }
 
   @media (prefers-reduced-motion: no-preference) {