Merge branch '301143-setup-content-wrapper' into 'master'

Decouple content-wrapper and content-wrapper-margin

See merge request gitlab-org/gitlab!63254

app/assets/stylesheets/framework/layout.scss

@@ -38,8 +38,11 @@ body {
   }
 }
 
-.content-wrapper {
+.content-wrapper-margin {
   margin-top: $header-height;
+}
+
+.content-wrapper {
   padding-bottom: 100px;
 }
 
@@ -166,15 +169,8 @@ body {
   }
 
   .content-wrapper {
-    margin-top: 0;
     padding-bottom: 0;
     flex: 1;
     min-height: 0;
   }
-
-  &.flash-shown {
-    .content-wrapper {
-      margin-top: 0;
-    }
-  }
 }

app/assets/stylesheets/framework/system_messages.scss

@@ -52,7 +52,7 @@
     top: $system-header-height + $header-height;
   }
 
-  .content-wrapper {
+  .content-wrapper-margin {
     margin-top: $system-header-height + $header-height;
   }
 
@@ -90,7 +90,7 @@
     bottom: $system-footer-height;
   }
 
-  .content-wrapper {
+  .content-wrapper-margin {
     margin-bottom: 16px;
   }
 

app/assets/stylesheets/print.scss

@@ -65,6 +65,6 @@ a[href]::after {
   margin-top: 0;
 }
 
-.content-wrapper {
+.content-wrapper-margin {
   margin-top: 0;
 }

app/views/layouts/_page.html.haml

 .layout-page{ class: page_with_sidebar_class }
   - if defined?(nav) && nav
     = render "layouts/nav/sidebar/#{nav}"
-  .content-wrapper{ class: "#{@content_wrapper_class}" }
+  .content-wrapper.content-wrapper-margin{ class: "#{@content_wrapper_class}" }
     .mobile-overlay
     = yield :group_invite_members_banner
     .alert-wrapper.gl-force-block-formatting-context

app/views/layouts/fullscreen.html.haml

@@ -11,6 +11,6 @@
       = render "layouts/broadcast"
       = yield :flash_message
       = render "layouts/flash"
-    .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch mt-0" }
+    .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
       = yield
     = footer_message

app/views/layouts/terms.html.haml

@@ -5,7 +5,7 @@
 
   %body{ data: { page: body_data_page } }
     .layout-page.terms{ class: page_class }
-      .content-wrapper.gl-mt-0
+      .content-wrapper
         .mobile-overlay
         .alert-wrapper
           = render "layouts/broadcast"