Fixed version selector dropdown scrolling

payara · Mar 15, 2024 · 8b3f9ca · 8b3f9ca
1 parent 3b849ff
commit 8b3f9ca
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -300,6 +300,14 @@ body {
     left: 0;
     min-width: 100%;
     position: absolute;
+    height: var(--navbar-dropdown-height);
+  }
+
+  .scrollable-dropdown {
+    height: auto;
+    max-height: var(--navbar-dropdown-max-height);
+    overflow-x: hidden;
+    overflow-y: scroll;
   }
 
   .navbar-dropdown .navbar-item {

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -132,6 +132,8 @@
   --nav-panel-menu-height: calc(100% - var(--drawer-height));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
+  --navbar-dropdown-height: calc((var(--nav-height) * 3) + var(--nav-line-height));
+  --navbar-dropdown-max-height: calc((var(--navbar-height) * 3));
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
   --toc-width: calc(162 / var(--rem-base) * 1rem);

diff --git a/src/partials/version-selector.hbs b/src/partials/version-selector.hbs
@@ -5,12 +5,14 @@
   <div class="navbar-item has-dropdown is-hoverable hide-for-print">
     <a class="navbar-link" href="#">{{@root.page.componentVersion.displayVersion}}</a>
     <div class="navbar-dropdown">
-      {{#each this}}
-        {{~#if (ne ./version @root.page.version)}}
-          <a class="navbar-item
+      <div class="scrollable-dropdown">
+        {{#each this}}
+          {{~#if (ne ./version @root.page.version)}}
+            <a class="navbar-item
             {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
-        {{/if~}}
-      {{/each}}
+          {{/if~}}
+        {{/each}}
+      </div>
     </div>
   </div>
 {{/with}}