Show edit and export on small screens

[tordans]

I looked into making the edit button visible on small screen #2233 and ran into a few issues that are making this less straight forward than I was hoping it to be.

1. Bootstrap does not provide responsive classes to change the button group to vertical.
   • There is an issue on this at Feature request: add responsive btn-group-vertical classes twbs/bootstrap#39213
   • We could change the layout of course.
   • We could also change the classes in JavaScript, which I did for this draft.
2. Bootstrap has a bug with vertical button list when the first button is a dropdown.
   • I reported this in Wrong border radius first element in btn-group-vertical is a dropdown twbs/bootstrap#40487 and my PR button-group: Fix btn-group-vertical by using same rules as btn-group twbs/bootstrap#40488 might fix it.
   • I added this fix as a workaround to our css for this draft.
3. Bootstrap does not support vertical button groups with split buttons ATM.
   • See https://getbootstrap.com/docs/5.2/components/button-group/#vertical-variation "Split button dropdowns are not supported here.".
   • We can work around this by adding a few utility classes, which I did for this draft.
   • But since the way we do responsive design on the website is a bit special, there are slight changes to what we have right now in certain edge case screen sizes. We could use more JS to fix this if needed…
4. Bootstrap does not handle hidden items in a group.
   • We are hiding the "Export" Page on the button group via CSS ATM and Bootstrap does not handle the case of hidden elements, so the button group borders are wrong.
   • For this solution I made all menu items visible. Following the logic that the reason why we have an export page so prominently on the page at all is to showcase the story of OSM, which is just as true on mobile. Hiding part of the story is worse than showing it so users can learn about it an realize they need a different device to use this part of the website. – We could continue hiding the page, of course, but need to add more custom css or JS to make bootstrap work.

This is what it looks like:

Logged out:

Logged in:

---

Where do go from here?

I consider hiding the Edit button in 2024 a bug which we should fix. And this PR is a way to do this.

In the near future we will need to reconsider this part of the menu, especially the screen usually visible on mobile to incorporate editors in the menu (openstreetmap/operations#877 (comment)).

---

Open issues:

• When changing the screen width without reload, the class change from "button group" to "vertical button group" is not applied.
  
  I can fix since depending on the feedback on this PR.

---

Closes #2233

[AntonKhorev]

Why do you wan a vertical button group? Doesn't it take too much space?

[AntonKhorev]

"Export" probably shouldn't be in this button group at all. With Export removed buttons should fit on a screen as a horizontal group.