[openstreetmap/openstreetmap-website] Use Bootstrap utilities to set z-indexes of map ui and fix some bugs (PR #4686)

[Anton Khorev]

## bug 1

Open the right sidebar, then open a dropdown menu ("more" or user menu):

![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/9607c116-1646-4ffb-afdc-341cac581fc6)

Seems to work fine. Now make the screen smaller. If you get the intermediate width like in #4675, the dropdown menu will be covered by the sidebar:

![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/61efe369-b73f-4584-9a0b-fc58d87137ae)

Bootstrap sets z-index to 1000 on dropdowns which should be high enough, but we use even higher z-indexes on map ui elements. We do this to keep them above Leaflet's range of z-indexes. What we could do instead and what this PR does is to isolate Leaflet in its own [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). Here I set the entire map at z-0 with a Bootstrap utility class. The right sidebar gets z-2 to stay above the floating left sidebar, which gets z-1.

![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/6820ddc4-88ca-4315-8bc3-1341f9ed85f1)

## bug 2

Open the right sidebar on a small screen then try to open the menu:

![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/6c84b873-bb44-4a15-876b-4d8091426006)

The menu is a part of the header, with z-index below the right sidebar. In addition to the fixes above I set the header at z-3:

![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/3fd36ba8-72aa-4097-9b28-6e7d4ae72c23)

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4686

-- Commit Summary --

  * Put map in its own stacking context
  * Use Bootstrap to set z-indexes of map-overlapping ui

-- File Changes --

    M app/assets/stylesheets/common.scss (3)
    M app/views/layouts/_header.html.erb (2)
    M app/views/layouts/map.html.erb (6)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4686.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4686.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4686
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4686 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240412/ed79021f/attachment.htm>