Merge pull request #4133 from AntonKhorev/flex-leaflet-controls

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

diff --combined app/assets/stylesheets/common.scss
index 3eedfdbae3d21fed1dcc65986a86e9f6e03ae28b,5f4c9777dacf20759d96a054b8e7b3b48af4204d..2386fed824850ef3c5a457c0751a1cd609c9a7f9
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -304,7 -304,7 +304,7 @@@ body.small-nav 
    }
  
    nav.secondary {
 -    .user-menu {
 +    .user-menu, .login-menu {
        width: 100%;
      }
    }
@@@ -351,6 -351,15 +351,15 @@@
  
  /* 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;
@@@ -460,11 -469,6 +469,11 @@@
        display: block;
        width: $sidebarWidth;
      }
 +
 +    button.btn-close {
 +      background-color: rgba(255, 255, 255, 0.5);
 +      opacity: 1.0;
 +    }
    }
  
    #map {
@@@ -1052,24 -1056,49 +1061,24 @@@ tr.turn:hover 
    width: 100%;
  }
  
 -/* Rules for the diary list page */
 -
 -.diary_post {
 -  position: relative;
 -  padding-top: $lineheight;
 -  padding-bottom: $lineheight/2;
 -  border-top: 1px solid $grey;
 -
 -  &.deleted {
 -    background-color: #fee;
 -  }
 -}
 -
  /* Rules for the diary entry page */
  
  .diary_entries {
    #map {
      height: 400px;
      display: none;
 -    margin-bottom: $lineheight;
    }
    .comments {
      max-width: 740px;
    }
    .diary-comment {
      border-top: 1px dashed $grey;
 -    padding-top: $lineheight/2;
 -    padding-bottom: $lineheight/2;
      &:first-child {
 -      margin-top: $lineheight/2;
 -      padding-top: $lineheight;
        border-top: 1px solid $grey;
      }
 -    &.deleted {
 -      background-color: #fee;
 -    }
      p {
        margin-bottom: $lineheight/2;
      }
 -    .comment-heading {
 -      margin-bottom: 0;
 -      margin-top: 0;
 -    }
    }
  }
  
@@@ -1103,6 -1132,32 +1112,6 @@@
    }
  }
  
 -/* Rules for the account settings page */
 -
 -#accountForm .user_image {
 -  margin-bottom: 0;
 -}
 -
 -#accountForm #user_image {
 -  margin-left: 20px;
 -}
 -
 -#accountForm ul.accountImage-options {
 -  margin-left: 120px;
 -}
 -
 -.nohome .location {
 -  display: none;
 -}
 -
 -#homerow .message {
 -  display: none;
 -}
 -
 -.nohome .message {
 -  display: inline !important;
 -}
 -
  /* Rules for the oauth authorization page */
  
  .oauth-authorize ul {
@@@ -1112,6 -1167,11 +1121,6 @@@
  /* Rules for messages pages */
  
  .messages {
 -  button[type="submit"] {
 -    margin: auto;
 -    white-space: nowrap;
 -  }
 -
    .inbox-row {
      background: $offwhite;
    }
@@@ -1119,6 -1179,80 +1128,6 @@@
    .inbox-row-unread {
      background: #CBEEA7;
    }
 -
 -  .right {
 -    float: right;
 -  }
 -}
 -
 -.inbox-row .inbox-mark-read {
 -  display: none;
 -}
 -
 -.info-line {
 -  margin-bottom: $lineheight;
 -  padding: $lineheight/4 0px 4px 0px;
 -  border-bottom: 1px solid $grey;
 -
 -  form, form div {
 -    display: inline;
 -  }
 -}
 -
 -.info-line .user_thumbnail_tiny {
 -  vertical-align: middle;
 -}
 -
 -.inbox-sent {
 -  white-space: nowrap;
 -}
 -
 -.inbox-mark-unread,
 -.inbox-mark-read,
 -.inbox-delete {
 -  width: 1%;
 -}
 -
 -.inbox-row-unread .inbox-mark-unread {
 -  display: none;
 -}
 -
 -/* Rules for highlighting fields with rails validation errors */
 -
 -.formError {
 -  display: inline-block;
 -  padding: 5px 10px;
 -  margin-top: 5px;
 -  border-radius: 4px;
 -  font-size: 12px;
 -  color: #fff;
 -  background-color: #ff7070;
 -}
 -
 -/* Rules for rails validation error boxes */
 -
 -#errorExplanation {
 -  width: 400px;
 -  border: 2px solid #ff7070;
 -  padding: 0 $lineheight/2;
 -  margin-bottom: $lineheight;
 -  background-color: #f0f0f0;
 -
 -  h2 {
 -    margin: 0 -10px 10px -10px;
 -    padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
 -    font-weight: bold;
 -    font-size: 12px;
 -    background-color: #c00;
 -    color: #fff;
 -    text-align: left;
 -  }
 -
 -  p {
 -    color: #333;
 -    margin-bottom: 0px;
 -    padding: $lineheight/4;
 -  }
  }
  
  .search_form {
@@@ -1155,8 -1289,15 +1164,8 @@@ img.user_thumbnail_tiny 
    max-height: 25px;
  }
  
 -/* Rules for geo microformats */
 -
 -abbr.geo {
 -  border-bottom: none;
 -}
 -
  /* General styles for action lists / subnavs */
  
 -
  nav.secondary-actions {
    margin-left: -11px;
    overflow: hidden;
@@@ -1183,6 -1324,24 +1192,6 @@@ div.secondary-actions 
    text-align: center;
  }
  
 -/* Create a single-line dl */
 -
 -dl.dl-inline {
 -  dt, dd {
 -    display: inline-block;
 -  }
 -  dd {
 -    margin-right: 1em;
 -  }
 -}
 -
 -/* Rules for OpenID logo */
 -
 -.openid_logo {
 -  vertical-align: text-bottom;
 -  border: 0;
 -}
 -
  /* Rules for rich text */
  
  .richtext,
@@@ -1190,8 -1349,6 +1199,8 @@@
    code {
      background: $lightgrey;
      padding: 2px 3px;
 +    direction: inherit; /* fix for Bootstrap < 5.2 */
 +    unicode-bidi: unset; /* fix for Bootstrap < 5.2 */
    }
  
    pre {
@@@ -1220,6 -1377,14 +1229,6 @@@
    }
  }
  
 -/* Rules for the user notes list */
 -
 -.note_list {
 -  tr.creator {
 -    background-color: $offwhite;
 -  }
 -}
 -
  /* Rules for the iD editor */
  
  .id-embed {