Removed `hidden-xs` class from alerts

Centered alert text and prevented alert actions links from floating
right for viewports below medium width (992px)

Centered alert text stopped alert actions from floating right for viewports below medium width (992px)

Update styles to use correct screen width variable for max-width media query

Added unreleased changelog

Added class to alert links wrapper
Updated styles for new class, float alert links on larger screens

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

@@ -1,8 +1,8 @@
 - 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

@@ -1,8 +1,8 @@
 - 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

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