Fix top-side spacing for viewport widths between xs and md

app/assets/stylesheets/utilities.scss

@@ -125,17 +125,22 @@
   }
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462
-.gl-md-mt-11 {
+// Will be moved to @gitlab/ui (without the !important) in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462
+// We only need the bang (!) version until the non-bang version is added to
+// @gitlab/ui utitlities.scss. Once there, it will get loaded in the correct
+// order to properly override `.gl-mt-6` which is used for narrower screen
+// widths (currently that style gets added to the application.css stylesheet
+// after this one, so it takes precedence).
+.gl-md-mt-11\! {
   @media (min-width: $breakpoint-md) {
-    margin-top: $gl-spacing-scale-11;
+    margin-top: $gl-spacing-scale-11 !important;
   }
 }
 
-// Same as above
-.gl-md-pt-11 {
+// Same as above (also without the !important) but for overriding `.gl-pt-6`
+.gl-md-pt-11\! {
   @media (min-width: $breakpoint-md) {
-    padding-top: $gl-spacing-scale-11;
+    padding-top: $gl-spacing-scale-11 !important;
   }
 }
 
@@ -160,13 +165,6 @@
   }
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1463
-.gl-xs-mt-6 {
-  @media (max-width: $breakpoint-sm) {
-    margin-top: $gl-spacing-scale-6;
-  }
-}
-
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1165
 .gl-xs-mb-4 {
   @media (max-width: $breakpoint-sm) {
@@ -181,13 +179,6 @@
   }
 }
 
-// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1463
-.gl-xs-pt-6 {
-  @media (max-width: $breakpoint-sm) {
-    padding-top: $gl-spacing-scale-6;
-  }
-}
-
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
 .gl-sm-pr-3 {
   @media (min-width: $breakpoint-sm) {

app/views/layouts/minimal.html.haml

@@ -8,7 +8,7 @@
     = render 'peek/bar'
     = render "layouts/header/empty"
     .layout-page
-      .content-wrapper.content-wrapper-margin.gl-md-pt-11.gl-xs-pt-6
+      .content-wrapper.content-wrapper-margin.gl-pt-6{ class: 'gl-md-pt-11!' }
         .alert-wrapper.gl-force-block-formatting-context
           = render "layouts/broadcast"
         .limit-container-width{ class: container_class }

ee/app/views/trials/_skip_trial.html.haml

-.gl-xs-mt-6.gl-md-mt-11
+.gl-mt-6{ class: 'gl-md-mt-11!' }
   - if params[:glm_source] == 'gitlab.com'
     = link_to s_('Trials|Go back to GitLab'), dashboard_projects_path, class: 'block center py-2'
     .label