[openstreetmap/openstreetmap-website] Stack preferred auth button over other auth buttons on small screens (PR #4976)

[Anton Khorev]

There's an attempt to wrap auth buttons below the preferred button with `flex-wrap` here:
https://github.com/openstreetmap/openstreetmap-website/blob/bc8ce5729da0a7df4306ae5f785f68980a9bf47b/app/views/application/_auth_providers.html.erb#L2

That's not going to work after the children of this flex container got 50% width in #4849. They always fit in one row, no matter how narrow 50% of that row is.

Here I'm using Bootstrap's grid system with two-column row above the small width breakpoint if there's a preferred auth button.

Before/after:
![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/572c079d-491e-48f1-8c58-9e3369ec7096) ![image](https://github.com/openstreetmap/openstreetmap-website/assets/4158490/24244b16-3bd1-43e8-9e3a-71e0532cb1c3)

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4976

-- Commit Summary --

  * Stack preferred auth button over other auth buttons on small screens

-- File Changes --

    M app/views/application/_auth_providers.html.erb (29)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4976.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4976.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/4976 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240711/b7e4a75c/attachment.htm>