Merge branch '327425-omniauth-labels-overflow-off-button' into 'master'

Fix overflowing text in OmniAuth login buttons

See merge request gitlab-org/gitlab!68884

app/assets/stylesheets/pages/login.scss

@@ -96,15 +96,10 @@
     }
 
     form {
-      width: 48%;
       padding: 0;
       border: 0;
       background: none;
       margin-bottom: $gl-padding;
-
-      @include media-breakpoint-down(md) {
-        width: 100%;
-      }
     }
 
     .omniauth-btn {

app/assets/stylesheets/startup/startup-signin.scss

@@ -634,17 +634,11 @@ svg {
   margin: 0;
 }
 .login-page .omniauth-container form {
-  width: 48%;
   padding: 0;
   border: 0;
   background: none;
   margin-bottom: 16px;
 }
-@media (max-width: 991.98px) {
-  .login-page .omniauth-container form {
-    width: 100%;
-  }
-}
 .login-page .omniauth-container .omniauth-btn {
   width: 100%;
 }

app/views/devise/shared/_omniauth_box.html.haml

@@ -7,10 +7,10 @@
   .d-flex.justify-content-between.flex-wrap
     - providers.each do |provider|
       - has_icon = provider_has_icon?(provider)
-      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default omniauth-btn oauth-login #{qa_class_for_provider(provider)}" do
+      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default omniauth-btn oauth-login #{qa_class_for_provider(provider)}", form: { class: 'gl-w-full' } do
         - if has_icon
           = provider_image_tag(provider)
-        %span
+        %span.gl-button-text
           = label_for_provider(provider)
   - unless hide_remember_me
     %fieldset.remember-me

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -634,17 +634,11 @@ svg {
   margin: 0;
 }
 .login-page .omniauth-container form {
-  width: 48%;
   padding: 0;
   border: 0;
   background: none;
   margin-bottom: 16px;
 }
-@media (max-width: 991.98px) {
-  .login-page .omniauth-container form {
-    width: 100%;
-  }
-}
 .login-page .omniauth-container .omniauth-btn {
   width: 100%;
 }