Fix sidebar overflow-y behavior

elixir-lang · Sep 15, 2023 · a0f57a9 · a0f57a9
1 parent a1c65d4
commit a0f57a9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
@@ -218,14 +218,18 @@
   font-weight: bold;
 }
 
-.sidebar .full-list {
-  margin: 0;
-  padding: 20px 0;
+.sidebar .sidebar-tabpanel {
+  flex: 1 1 .01%;
   overflow-y: auto;
   overscroll-behavior: contain;
   position: relative;
   -webkit-overflow-scrolling: touch;
-  flex: 1 1 .01%;
+}
+
+.sidebar .full-list {
+  margin: 0;
+  padding: 20px 0;
+  position: relative;
 }
 
 .sidebar .full-list :is(li, a) {

diff --git a/lib/ex_doc/formatter/html/templates/sidebar_template.eex b/lib/ex_doc/formatter/html/templates/sidebar_template.eex
@@ -63,18 +63,18 @@
     </ul>
   </div>
 
-  <div id="extras-tab-panel" role="tabpanel" aria-labelledby="extras-list-tab-button">
+  <div id="extras-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="extras-list-tab-button">
     <ul id="extras-full-list" class="full-list"></ul>
   </div>
 
   <%= if nodes_map.modules != [] do %>
-    <div id="modules-tab-panel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>
+    <div id="modules-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>
       <ul id="modules-full-list" class="full-list"></ul>
     </div>
   <% end %>
 
   <%= if nodes_map.tasks != [] do %>
-    <div id="tasks-tab-panel" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden>
+    <div id="tasks-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="tasks-list-tab-button" hidden>
       <ul id="tasks-full-list" class="full-list"></ul>
     </div>
   <% end %>

diff --git a/test/ex_doc/formatter/html/templates_test.exs b/test/ex_doc/formatter/html/templates_test.exs
@@ -246,7 +246,7 @@ defmodule ExDoc.Formatter.HTML.TemplatesTest do
                ~r{<li>[\s\n]*<button id="modules-list-tab-button" role="tab" data-type="modules" aria-controls="modules-tab-panel" aria-selected="false" tabindex="-1">[\s\n]*Modules[\s\n]*</button>[\s\n]*</li>}
 
       assert content =~
-               ~r{<div id="modules-tab-panel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>[\n\s]*<ul id="modules-full-list" class="full-list"></ul>[\n\s]*</div>}
+               ~r{<div id="modules-tab-panel" class="sidebar-tabpanel" role="tabpanel" aria-labelledby="modules-list-tab-button" hidden>[\n\s]*<ul id="modules-full-list" class="full-list"></ul>[\n\s]*</div>}
 
       refute content =~ ~r{id="tasks-list-tab-button"}
       refute content =~ ~r{id="tasks-full-list"}