Add gl-force-block-formatting-context to alert-wrapper

Looks like c0ede38d removed an empty div which was
actually preventing some margin collapsing. Thankfully we
can force a [block formatting context][1] to also prevent [margin
collapsing][2].

[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

app/assets/stylesheets/utilities.scss

@@ -122,3 +122,10 @@
     margin-left: $gl-spacing-scale-3;
   }
 }
+
+// This is used to help prevent issues with margin collapsing.
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing.
+.gl-force-block-formatting-context::after {
+  content: '';
+  display: flex;
+}

app/views/layouts/_page.html.haml

@@ -4,7 +4,7 @@
   .content-wrapper{ class: "#{@content_wrapper_class}" }
     .mobile-overlay
     = yield :group_invite_members_banner
-    .alert-wrapper
+    .alert-wrapper.gl-force-block-formatting-context
       = render 'shared/outdated_browser'
       = render_if_exists "layouts/header/licensed_user_count_threshold"
       = render_if_exists "layouts/header/token_expiry_notification"

changelogs/unreleased/ps-fix-new-project-margin.yml

+---
+title: Fix top margin in new project page
+merge_request: 47109
+author:
+type: fixed