From 7f27d55926c7b86aef44f371da9dce90eef35170 Mon Sep 17 00:00:00 2001
From: Angelika Tyborska <angelikatyborska@fastmail.com>
Date: Fri, 15 Sep 2023 19:58:18 +0200
Subject: [PATCH] Fix sidebar overflow-y behavior (#1776)

---
 assets/css/sidebar.css                               | 12 ++++++++----
 .../formatter/html/templates/sidebar_template.eex    |  6 +++---
 test/ex_doc/formatter/html/templates_test.exs        |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
index f38ab9b3b..3df2f0cdc 100644
--- 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
index 17223ca03..ac0390c40 100644
--- 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
index a9e57705b..4b6e5d0d7 100644
--- 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"}