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.
This commit is contained in:
Kam
2026-08-11 00:38:09 +03:00
committed by Alon Mishne
parent 66c5ea7544
commit dd29713828
4 changed files with 6 additions and 3 deletions
@@ -171,6 +171,7 @@
flex-direction: column;
max-height: 12rem;
overflow: auto;
overscroll-behavior: contain;
padding: 0.25rem;
}
@@ -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 {
@@ -6,6 +6,7 @@
list-style: none;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
height: 100vh;
padding: 0;
margin: 0;
@@ -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);