Merge branch 'outdated-browser-position-fix' into 'master'

Fixed outdated browser banner positioning

Closes #40824

See merge request gitlab-org/gitlab-ce!15762

app/assets/stylesheets/framework/common.scss

@@ -237,19 +237,6 @@ li.note {
   }
 }
 
-.browser-alert {
-  padding: 10px;
-  text-align: center;
-  background: $error-bg;
-  color: $white-light;
-  font-weight: $gl-font-weight-bold;
-
-  a {
-    color: $white-light;
-    text-decoration: underline;
-  }
-}
-
 .warning_message {
   border-left: 4px solid $warning-message-border;
   color: $warning-message-color;

app/views/layouts/_page.html.haml

@@ -2,6 +2,7 @@
   - if defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
   .content-wrapper.page-with-new-nav
+    = render 'shared/outdated_browser'
     .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"

app/views/layouts/header/_default.html.haml

@@ -75,5 +75,3 @@
         %span.sr-only Toggle navigation
         = sprite_icon('more', size: 12, css_class: 'more-icon js-navbar-toggle-right')
         = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
-
-= render 'shared/outdated_browser'

app/views/shared/_outdated_browser.html.haml

 - if outdated_browser?
-  .browser-alert
+  .flash-container
+    .flash-alert.text-center
       GitLab may not work properly because you are using an outdated web browser.
       %br
       Please install a

changelogs/unreleased/outdated-browser-position-fix.yml

+---
+title: Fixed outdated browser flash positioning
+merge_request:
+author:
+type: fixed