VSA - Clean up mobile view of stage action buttons

Background

The stage action buttons in the Edit value stream modal on group level VSA don't look great on mobile:

We should fix the alignment of the stage action buttons. A possible solution would be to add breakpoint classes to reduce the size of the text field.

Accessing the form

1. Ensure you have an EE license, or stub the cycle_analytics_for_groups license feature to true

2. Create a group

3. Create a project within a group (make sure to initialize the project with a readme, or create it from a template)

4. Seed some test VSA data

   $ VSA_SEED_PROJECT_ID=<project-id> VSA_ISSUE_COUNT=10 SEED_VSA=true FILTER=cycle_analytics rake db:seed_fu

5. Navigate to value stream analytics for the group, ie for a project named clean-vsa-project in group new-vsa-group it would be http://<gdk>/group/:group_id/-/analytics/value_stream_analytics (or find it in the left menu)

6. Click the value stream select dropdown

Create value stream dropdown

Now click Create new value stream

TODO:

• Update default_stage_fields and custom_stage_fields components
• Add additional CSS utilities to gitlab-ui

Possible fix

We will need to make changes to 2 components:

• ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue
• ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/custom_stage_fields.vue

As well as adding some custom utility CSS classes to fix the alignment in desktop and mobile view. This patch below can be a starting point:

diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index eb9f7829436..3b16fb1508e 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -278,3 +278,16 @@ $gl-line-height-42: px-to-rem(42px);
 .gl-pr-10 {
   padding-right: $gl-spacing-scale-10;
 }
+
+// TODO: will be moved to @gitlab/ui as part of https://gitlab.com/gitlab-org/gitlab/-/issues/349008
+.gl-sm-mt-6 {
+  @include media-breakpoint-up(sm) {
+    margin-top: $gl-spacing-scale-6;
+  }
+}
+
+.gl-sm-mt-6\! {
+  @include media-breakpoint-up(sm) {
+    margin-top: $gl-spacing-scale-6 !important;
+  }
+}
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue
index 97cd2ca1d4d..6c206445bfb 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/default_stage_fields.vue
@@ -64,51 +64,56 @@ export default {
 </script>
 <template>
   <div class="gl-mb-4" data-testid="value-stream-stage-fields">
-    <div class="gl-display-flex">
+    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
       <gl-form-group
-        class="gl-flex-grow-1 gl-mb-0"
+        class="gl-flex-grow-1 gl-mr-2"
         :label="stageLabel"
         :state="isValid('name')"
         :invalid-feedback="renderError('name')"
         :data-testid="`default-stage-name-${index}`"
         :description="$options.i18n.DEFAULT_STAGE_FEATURES"
       >
-        <!-- eslint-disable vue/no-mutating-props -->
-        <gl-form-input
-          v-model.trim="stage.name"
-          :name="`create-value-stream-stage-${index}`"
-          :placeholder="$options.i18n.FORM_FIELD_STAGE_NAME_PLACEHOLDER"
-          disabled="disabled"
-          required
-        />
-        <!-- eslint-enable vue/no-mutating-props -->
+        <div>
+          <!-- eslint-disable vue/no-mutating-props -->
+          <gl-form-input
+            v-model.trim="stage.name"
+            :name="`create-value-stream-stage-${index}`"
+            :placeholder="$options.i18n.FORM_FIELD_STAGE_NAME_PLACEHOLDER"
+            disabled="disabled"
+            required
+          />
+          <!-- eslint-enable vue/no-mutating-props -->
+          <div
+            class="gl-display-flex gl-align-items-center gl-mt-3"
+            :data-testid="`stage-start-event-${index}`"
+          >
+            <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{
+              $options.i18n.DEFAULT_FIELD_START_EVENT_LABEL
+            }}</span>
+            <gl-form-text class="gl-m-0" tag="span">{{
+              eventName(stage.startEventIdentifier)
+            }}</gl-form-text>
+          </div>
+          <div
+            class="gl-display-flex gl-align-items-center"
+            :data-testid="`stage-end-event-${index}`"
+          >
+            <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{
+              $options.i18n.DEFAULT_FIELD_END_EVENT_LABEL
+            }}</span>
+            <gl-form-text class="gl-m-0" tag="span">{{
+              eventName(stage.endEventIdentifier)
+            }}</gl-form-text>
+          </div>
+        </div>
       </gl-form-group>
       <stage-field-actions
-        class="gl-mt-6"
+        class="gl-mt-0 gl-sm-mt-6!"
         :index="index"
         :stage-count="totalStages"
         @move="$emit('move', $event)"
         @hide="$emit('hide', $event)"
       />
     </div>
-    <div
-      class="gl-display-flex gl-align-items-center gl-mt-3"
-      :data-testid="`stage-start-event-${index}`"
-    >
-      <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{
-        $options.i18n.DEFAULT_FIELD_START_EVENT_LABEL
-      }}</span>
-      <gl-form-text class="gl-m-0" tag="span">{{
-        eventName(stage.startEventIdentifier)
-      }}</gl-form-text>
-    </div>
-    <div class="gl-display-flex gl-align-items-center" :data-testid="`stage-end-event-${index}`">
-      <span class="gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold">{{
-        $options.i18n.DEFAULT_FIELD_END_EVENT_LABEL
-      }}</span>
-      <gl-form-text class="gl-m-0" tag="span">{{
-        eventName(stage.endEventIdentifier)
-      }}</gl-form-text>
-    </div>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue
index c587ebdfed4..d1789feceb0 100644
--- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue
+++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/create_value_stream_form/stage_field_actions.vue
@@ -59,7 +59,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-button-group class="gl-px-2">
+    <gl-button-group class="gl-pr-2">
       <gl-button
         v-gl-tooltip
         :data-testid="`stage-action-move-down-${index}`"