[openstreetmap/openstreetmap-website] Use media-breakpoint-up for map layouts (PR #7197)

[Marwin Hochfelsner]

@hlfan commented on this pull request.



> +  @include media-breakpoint-up(md) {
     #sidebar, #map {
-      position: relative;
-      overflow-x: hidden;
-      width: 100%;
-      height: 50%;
+      height: 100%;
     }
 
-    #map-ui {
-      width: 100%;
-      height: 50%;
-      overflow-y: scroll;
+    #sidebar {
+      width: $sidebarWidth;
     }
 
-    .overlay-sidebar.overlay-right-sidebar {
-      #sidebar {
-        position: absolute;
-        width: 350px;
-        height: auto;
-        overflow: hidden;
-      }
+    #map {
+      width: auto;
+    }
 
-      #map {
-        height: 100%;
-      }
+    .overlay-sidebar.overlay-right-sidebar #sidebar {
+      width: $sidebarWidth;
+    }
+
+    #map-ui {
+      width: 250px;
+      height: 100%;
+      overflow-y: auto;
     }
   }

Then this can be made pretty readable:

```css
  @include media-breakpoint-up(md) {
    #sidebar, #map, #map-ui {
      height: 100%;
    }

    #sidebar {
      width: $sidebarWidth;
    }

    #map {
      width: auto;
    }

    #map-ui {
      width: 250px;
    }
  }
```

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

Message ID: <openstreetmap/openstreetmap-website/pull/7197/review/4606120595 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260630/33b7ff4b/attachment.htm>