Use multiple columns for map controls if they don't fit vertically

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d74ece45a66a2b6f323f1b07acc452aa7ed0b483..5f4c9777dacf20759d96a054b8e7b3b48af4204d 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -351,6 +351,15 @@ body.small-nav {
 
 /* Rules for Leaflet maps */
 
+.leaflet-top.leaflet-right,
+.leaflet-top.leaflet-left {
+  height: 100%;
+  column-gap: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap-reverse;
+}
+
 .leaflet-control .control-button {
   display: block;
   height: 40px;