As many have already mentioned, using the map view on small screens (e.g. built-in laptop screen) works fine (see first screenshot below), however on larger screens the map itself doesn’t scale vertically and the controls and, more importantly, the list of observations are both centered on the map, instead of being aligned to the lateral edges of the window (see second screenshot below). This is a very poor use of screen space, especially for those working with external displays and higher resolutions.
I’ve seen similar posts from 2019 and again in 2023, so it really surprised me that to this day, almost 7 years after the original post, it still hasn’t been fixed.
Revamping this entire page has been on the roadmap for a long time but it is clearly a bottleneck for what could be a much better user experience. My suggestion is at least make some minor CSS changes to solve these issues with the current layout without affecting the DOM.
Proposed solution:
For example, fiddling a bit with developer tools I’ve noticed that the map itself is loaded inside an .obs-container element with a fixed height: 550px;. That height should not be fixed but instead be fluid and scale with the window height by subtracting the heights of the other elements above it (i.e. header/navbar, filters, stats) minus a bit of extra space to reveal some of the page footer so that the user can still scroll the page without the map hijacking the scroll function for zooming in/out. So its new height property would be:
height: calc(100vh - 57px - 109px - 75px - 100px);
Then the #obs element containing the list of observations should scale as well, so instead of the fixed height: 420px; it should also scale vertically. Unfortunately because of the nesting, giving it height: 100%; won’t work, so instead you can calculate it dynamically just like above, minus an extra 40px for the vertical margins around the map edges:
height: calc(100vh - 57px - 109px - 75px - 100px - 40px);
With these changes, the map and observation list will scale to any screen size (tested!).
Now the .container element has a fixed width: 1170px; which comes from Bootstrap, but it that can be overridden to width: 100%; so that the map controls and observation list can now shift to the sides of the map, making more working space.
Ideally the observation list wouldn’t become too wide on bigger screens, and I see that its parent element has the typical Boostrap classes col-xs-4 col-xs-offset-8 , but Bootstrap also offers other breakpoints, so for large or extra-large screens you could add col-xxl-2 col-xxl-offset-10.
With these suggested changes, here’s how the map view would look like on a 27” 4k display:
