Make close buttons stick to the top of scrolled areas

app/assets/javascripts/leaflet.sidebar-pane.js

@@ -18,7 +18,7 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) {
     button.appendTo($container);
 
     const $ui = $("<div>")
-      .attr("class", uiClass + "-ui");
+      .attr("class", `${uiClass}-ui position-relative z-n1`);
 
     $("<h2 class='p-3 pb-0 pe-5 text-break'>")
       .text(I18n.t(paneTitle))

app/views/layouts/_sidebar_close.html.erb

@@ -1,5 +1,14 @@
-<div class="sidebar-close-controls">
+<div class="sidebar-close-controls sticky-top z-0">
-  <div class="position-absolute end-0 m-2">
+  <div class="position-absolute end-0 m-2 rounded-5 bg-body-tertiary shadow-sm">
-    <button type="button" class="btn-close d-block p-2" aria-label="<%= t("javascripts.close") %>"></button>
+    <button type="button" disabled class="btn-close d-block p-2 invisible"></button>
+  </div>
+</div>
+<div class="sidebar-close-controls sticky-top">
+  <div class="position-absolute end-0 m-2 rounded-5">
+    <button type="button" class="btn-close d-block p-2 rounded-5" aria-label="<%= t("javascripts.close") %>"></button>
+  </div>
+</div>
+<div class="sidebar-close-controls position-relative">
+  <div class="position-absolute end-0 bg-body p-4">
   </div>
 </div>

app/views/layouts/map.html.erb

@@ -26,7 +26,7 @@
       </div>
     </div>
 
-    <div id="sidebar_content" class="p-3">
+    <div id="sidebar_content" class="p-3 position-relative z-n1">
       <%= yield %>
     </div>