Merge branch...

Merge branch '327997-improve-mobile-friendliness-of-paid-feature-highlight-experiment' into 'master'

Improve mobile-friendliness of paid feature highlight experiment

See merge request gitlab-org/gitlab!59537

app/assets/stylesheets/components/feature_highlight.scss

@@ -7,3 +7,25 @@
     padding: 0.25rem;
   }
 }
+
+.gl-order-1 {
+  order: 1;
+}
+
+.gl-sm-order-init {
+  @media (min-width: $breakpoint-sm) {
+    order: initial;
+  }
+}
+
+.gl-xs-ml-3 {
+  @media (max-width: $breakpoint-sm) {
+    @include gl-ml-3;
+  }
+}
+
+.gl-sm-mr-3 {
+  @media (min-width: $breakpoint-sm) {
+    @include gl-mr-3;
+  }
+}

ee/app/views/shared/issuable/_approvals.html.haml

@@ -6,11 +6,11 @@
 - if !Feature.enabled?(:mr_collapsed_approval_rules, @project)
   .form-group.row
     .col-sm-2.col-form-label.gl-static
-      .gl-display-flex.gl-align-items-center.gl-justify-content-end
+      .gl-display-flex.gl-align-items-center.gl-sm-justify-content-end
         - root_group = @project.group&.root_ancestor
         - run_highlight_paid_features_during_active_trial_experiment(root_group) do
           - feature_name = 'merge request approvals'
-          .gl-mr-3.gl-mb-2
+          .gl-xs-ml-3.gl-sm-mr-3.gl-mb-2.gl-order-1.gl-sm-order-init
             #js-paid-feature-badge{ data: paid_feature_badge_data_attrs(feature_name) }
           #js-paid-feature-popover{ data: paid_feature_popover_data_attrs(group: root_group, feature_name: feature_name) }
         = form.label :approver_ids, "Approval rules"