[openstreetmap/openstreetmap-website] Fix left/right sidebar resizing on mobile devices (PR #5521)

[Tom Hughes]

@tomhughes commented on this pull request.

This mostly looks fine for me and seems to work well, or at least much better than what we have now! I've just added one inline comment.

> @@ -347,15 +347,22 @@ L.OSM.Map = L.Map.extend({
   },
 
   setSidebarOverlaid: function (overlaid) {
-    var sidebarWidth = 350;
+    var mobileDeviceWidth = window.getComputedStyle(document.documentElement).getPropertyValue("--bs-breakpoint-md");
+    var isMobileDevice = window.matchMedia(`(max-width: ${mobileDeviceWidth})`).matches;

I wonder if `mobileDevice` is the right way to describe this - what we're really looking at is  which side of bootstrap's medium breakpoint we are which in turn controls whether "sidebars" go at the side or the top. Maybe @gravitystorm has a thought?

Also I think technically to match https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width we should subtract `.02` from max-width in the match?

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

Message ID: <openstreetmap/openstreetmap-website/pull/5521/review/2619408540 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250215/2d727990/attachment.htm>