Merge branch '25776-alerts-should-be-responsive' into 'master'

Resolve "Alerts should be responsive"

Closes #25776

See merge request !8424

app/assets/stylesheets/framework/layout.scss

@@ -41,6 +41,21 @@ body {
     }
   }
 
+  .alert-link-group {
+    float: right;
+  }
+
+  /* Center alert text and alert action links on smaller screens */
+  @media (max-width: $screen-sm-max) {
+    .alert {
+      text-align: center;
+    }
+
+    .alert-link-group {
+      float: none;
+    }
+  }
+
   /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
   .alert-warning {
     transition: background-color 0.15s, border-color 0.15s;

app/views/shared/_no_password.html.haml

 - if cookies[:hide_no_password_message].blank? && !current_user.hide_no_password && current_user.require_password?
-  .no-password-message.alert.alert-warning.hidden-xs
+  .no-password-message.alert.alert-warning
     You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
       |
       = link_to 'Remind later', '#', class: 'hide-no-password-message'

app/views/shared/_no_ssh.html.haml

 - if cookies[:hide_no_ssh_message].blank? && !current_user.hide_no_ssh_key && current_user.require_ssh_key?
-  .no-ssh-key-message.alert.alert-warning.hidden-xs
+  .no-ssh-key-message.alert.alert-warning
     You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', profile_keys_path, class: 'alert-link'} to your profile
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'alert-link'
       |
       = link_to 'Remind later', '#', class: 'hide-no-ssh-message alert-link'

changelogs/unreleased/25776-alerts-should-be-responsive.yml

+---
+title: Changed alerts to be responsive, centered text on smaller viewports
+merge_request: 8424
+author: Connor Smallman