From c3fa34b5954bf9b5281229934da37f62c99119e8 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 8 Mar 2025 18:26:07 +0300
Subject: [PATCH] Make close buttons stick to the top of scrolled areas

---
 app/assets/javascripts/leaflet.sidebar-pane.js |  2 +-
 app/views/layouts/_sidebar_close.html.erb      | 15 ++++++++++++---
 app/views/layouts/map.html.erb                 |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js
index 6c7de5da7..7408585f2 100644
--- a/app/assets/javascripts/leaflet.sidebar-pane.js
+++ b/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))
diff --git a/app/views/layouts/_sidebar_close.html.erb b/app/views/layouts/_sidebar_close.html.erb
index 5c3773625..6c9686a50 100644
--- a/app/views/layouts/_sidebar_close.html.erb
+++ b/app/views/layouts/_sidebar_close.html.erb
@@ -1,5 +1,14 @@
-<div class="sidebar-close-controls">
-  <div class="position-absolute end-0 m-2">
-    <button type="button" class="btn-close d-block p-2" aria-label="<%= t("javascripts.close") %>"></button>
+<div class="sidebar-close-controls sticky-top z-0">
+  <div class="position-absolute end-0 m-2 rounded-5 bg-body-tertiary shadow-sm">
+    <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>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index f65fde2c2..62e979c05 100644
--- a/app/views/layouts/map.html.erb
+++ b/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>
 
-- 
2.39.5