[openstreetmap/openstreetmap-website] Post-merge UI review for #4455 (Issue #4773)

[Emin Kocan]

Regarding the globe positioning and page width, I implemented Bootstrap grid for the page layout. To address the globe positioning overlap, I tried using Flexbox as mentioned in issue  #4793. However, the problem persists because the container width now includes both the upper part (tabs and globe) and the form itself, reducing the available space for the globe.
 
To mitigate this issue, I experimented with the background-position and background-size properties in CSS and came up with a few solutions. @tomhughes @gravitystorm @AntonKhorev -  I would greatly appreciate any feedback on these approaches:

1. Image scaling with 3 breakpoints:

https://github.com/openstreetmap/openstreetmap-website/assets/76796906/11ff9ca4-83ba-4d9c-8c83-26bf3c3d420e


2. Image scaling with extra breakpoints:

https://github.com/openstreetmap/openstreetmap-website/assets/76796906/742238e7-4d0b-4eb4-b724-16812d8d5cd9


3. Globe cutoff without scaling:

https://github.com/openstreetmap/openstreetmap-website/assets/76796906/a47568c5-a91a-48b9-aa37-79307ca44f6e


4. Globe cutoff with additional scaling:

https://github.com/openstreetmap/openstreetmap-website/assets/76796906/2f81baa5-2bc2-40a3-af5b-0a1876aeb942




-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/4773#issuecomment-2192031957
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/4773/2192031957 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240626/a840f3fe/attachment-0001.htm>