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

[Andy Allan]

@gravitystorm commented on this pull request.



> @@ -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;

> Maybe @gravitystorm has a thought?

In general we must avoid referring to narrow screens as "mobile devices" - that causes endless confusion among our developers. Mobile devices can have large screen widths, desktop windows can become narrow, etc.

With bootstrap the `md` means "medium" not "mobile device" - perhaps this is the source of the confusion here?

https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints

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

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