From c3c4bf59c2f5710b6793b220c5b53a8dd7b33faf Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 12 Apr 2024 16:50:21 +0300
Subject: [PATCH 1/2] Put map in its own stacking context

---
 app/views/layouts/map.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 65ba2ee6a..310a97633 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -69,7 +69,7 @@
   <div id="map-ui" class="bg-body">
   </div>
 
-  <div id="map" tabindex="2">
+  <div id="map" tabindex="2" class="z-0">
   </div>
 
   <div id="attribution" class="d-none">

From 485ac16cfc7e4442cedd945cca33fca54d1f30d2 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 12 Apr 2024 16:51:30 +0300
Subject: [PATCH 2/2] Use Bootstrap to set z-indexes of map-overlapping ui

---
 app/assets/stylesheets/common.scss | 3 ---
 app/views/layouts/_header.html.erb | 2 +-
 app/views/layouts/map.html.erb     | 4 ++--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1ccdc7871..b40c60835 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -90,7 +90,6 @@ time[title] {
 header {
   height: $headerHeight;
   position: relative;
-  z-index: 1001;
   font-size: 14px;
 
   h1, nav, nav > ul, nav > ul > li {
@@ -329,7 +328,6 @@ body.small-nav {
 
   .overlay-sidebar #sidebar {
     position: absolute;
-    z-index: 1000;
     height: auto;
     overflow: hidden;
 
@@ -396,7 +394,6 @@ body.small-nav {
     }
 
     #map-ui {
-      z-index: 9999;
       width: 100%;
       height: 50%;
       overflow-y: scroll;
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index d5b6a9e01..9f3d01b02 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,4 +1,4 @@
-<header class="d-flex bg-body text-nowrap closed">
+<header class="d-flex bg-body text-nowrap closed z-3">
   <h1 class="m-0 fw-semibold">
     <a href="<%= root_path %>" class="text-body-emphasis text-decoration-none geolink">
       <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 310a97633..bcbe20968 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -21,7 +21,7 @@
 <% end %>
 
 <% content_for :content do %>
-  <div id="sidebar" class="bg-body">
+  <div id="sidebar" class="bg-body z-1">
     <%= render :partial => "layouts/search", :locals => { :autofocus => true } %>
 
     <div id="flash">
@@ -66,7 +66,7 @@
     </div>
   </noscript>
 
-  <div id="map-ui" class="bg-body">
+  <div id="map-ui" class="bg-body z-2">
   </div>
 
   <div id="map" tabindex="2" class="z-0">