Social login buttons alignment

[janimo]

When some of the options are turned off, the rest of the buttons do not fill the horizontal space.

[javierm]

Hi, @janimo 😄.

Thanks for reporting! This was done intentionally, so the buttons aren't too big if there's only one. Using a flex layout would probably solve this issue, but then the case where there are two elements on the first row and one element on the second one would be tricky 🤔.

Since the current behaviour is good enough in most cases, this isn't currently a priority for us, but pull requests are welcome 😉.

[janimo]

Hi Javier :),

Actually, having the buttons full width each on a separate row may not be a bad idea :)
That way it looks symmetrical regardless of the combination selected.
This is a common UI with social login dialogs, button width being same as for the input text fields. For example:
https://auth0.com/signup?place=header&type=button&text=sign%20up
https://supabase.com/dashboard/sign-in?

This can be obtained with something as simple as

--- a/app/views/devise/_omniauth_form.html.erb
+++ b/app/views/devise/_omniauth_form.html.erb
@@ -7,7 +7,7 @@
     </div>
 
     <% oauth_logins.each do |login| %>
-      <div class="small-12 medium-6 large-4 column end">
+      <div class="column">
         <%= link_to t("omniauth.#{login}.name"), send("user_#{login}_omniauth_authorize_path"),
                     title: t("omniauth.#{login}.#{action}"),
                     class: "button-#{login.to_s.delete_suffix("_oauth2")} button expanded",

Any number of buttons autofilling the width of a single row may only be possible with Foundation's xy-grid .

[javierm]

Hi, @janimo 😄.

It's also common to display the login items on the same row, though 🤔.

Maybe we could start using grid layouts, since support for it is pretty much universal nowadays 🤔. Are you familiar with them? Would something like this make sense?

.oauth-logins { /* Container we'd have to add, while removing all the column small-12 etc... classes */
  column-gap: rem-calc(map-get($grid-column-gutter, medium));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}

[janimo]

It probably makes sense to use CSS Grid, but I don't know how much effort it would be to switch across the codebase. That said, my CSS skills are minimal :/