From dd2971382887feaf123204dc484d76f920bf0a0b Mon Sep 17 00:00:00 2001
From: Kam <erkamyaman35@gmail.com>
Date: Tue, 11 Aug 2026 00:38:09 +0300
Subject: [PATCH] fix(docs-infra): contain scroll within adev dropdown menus

Scrolling to the top or bottom of a dropdown let the scroll event chain into
the page behind it, causing the whole app to scroll. #70137 fixed this for the
version picker, but the same containment was missing on every other menu.

The API reference filter, the tutorial step list and the update guide's version
dropdowns already had a scroll container, so they only needed
overscroll-behavior.

The social and theme mini-menus had neither a height cap nor overflow, so
overscroll-behavior alone would have been inert on them. They now share the
version picker's max-height/overflow-y/overscroll-behavior, hoisted onto
.adev-mini-menu, which also keeps their items reachable when the viewport is
too short to fit the whole menu.
---
 adev/shared-docs/components/select/select.component.scss    | 1 +
 adev/src/app/core/layout/navigation/mini-menu.scss          | 6 +++---
 .../src/app/features/tutorial/tutorial-navigation-list.scss | 1 +
 adev/src/app/features/update/update.component.scss          | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/adev/shared-docs/components/select/select.component.scss b/adev/shared-docs/components/select/select.component.scss
index b6c8f3b9812..d6b736c7854 100644
--- a/adev/shared-docs/components/select/select.component.scss
+++ b/adev/shared-docs/components/select/select.component.scss
@@ -171,6 +171,7 @@
   flex-direction: column;
   max-height: 12rem;
   overflow: auto;
+  overscroll-behavior: contain;
   padding: 0.25rem;
 }
 
diff --git a/adev/src/app/core/layout/navigation/mini-menu.scss b/adev/src/app/core/layout/navigation/mini-menu.scss
index e9243278065..2c9f52e3a26 100644
--- a/adev/src/app/core/layout/navigation/mini-menu.scss
+++ b/adev/src/app/core/layout/navigation/mini-menu.scss
@@ -11,6 +11,9 @@
   border-radius: 0.25rem;
   z-index: var(--z-index-mini-menu);
   box-shadow: 10px 4px 40px 0 rgba(0, 0, 0, 0.075);
+  max-height: 70dvh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 
   // Animation for mini-menu appearance
   animation: menuFadeIn 0.2s ease-out forwards;
@@ -107,9 +110,6 @@
 }
 
 .adev-version-picker {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  max-height: 70dvh;
   margin-inline-start: 10px;
 
   li {
diff --git a/adev/src/app/features/tutorial/tutorial-navigation-list.scss b/adev/src/app/features/tutorial/tutorial-navigation-list.scss
index 183da7f135e..aecd9fb1b31 100644
--- a/adev/src/app/features/tutorial/tutorial-navigation-list.scss
+++ b/adev/src/app/features/tutorial/tutorial-navigation-list.scss
@@ -6,6 +6,7 @@
   list-style: none;
   overflow-y: auto;
   overflow-x: hidden;
+  overscroll-behavior: contain;
   height: 100vh;
   padding: 0;
   margin: 0;
diff --git a/adev/src/app/features/update/update.component.scss b/adev/src/app/features/update/update.component.scss
index 9977f4d6717..968e47de00a 100644
--- a/adev/src/app/features/update/update.component.scss
+++ b/adev/src/app/features/update/update.component.scss
@@ -65,6 +65,7 @@ h4 {
   transform: translateY(-0.7rem);
   max-height: 200px;
   overflow-y: auto;
+  overscroll-behavior: contain;
   width: $ver-dropdown-width;
   box-sizing: border-box;
   background: var(--page-background);