Merge branch '433271-fix-mr-widget-ui-issues' into 'master'

Fix alignment issues with the MR widget

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/138789



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: Fernando Cardenas <14022659-fernando-c@users.noreply.gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Reviewed-by: Savas Vedova <svedova@gitlab.com>
Co-authored-by: Savas Vedova <svedova@gitlab.com>

app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue

@@ -72,10 +72,14 @@ export default {
     :widget-name="widgetName"
     :header="data.header"
     :help-popover="data.helpPopover"
-    :class="{ 'gl-border-top-0': rowIndex === 0 }"
+    :class="{
+      'gl-border-top-0': rowIndex === 0,
+      'gl-align-items-start': data.supportingText,
+      'gl-align-items-baseline': !data.supportingText,
+    }"
   >
     <template #body>
-      <div class="gl-w-full gl-display-flex" :class="{ 'gl-flex-direction-column': level === 1 }">
+      <div class="gl-w-full gl-display-flex gl-flex-direction-column">
         <div class="gl-display-flex gl-flex-grow-1">
           <div class="gl-display-flex gl-flex-grow-1 gl-align-items-baseline">
             <div>

app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue

@@ -81,8 +81,7 @@ export default {
   <div
     class="gl-display-flex"
     :class="{
-      'gl-border-t gl-py-3 gl-pl-7 gl-align-items-baseline': level === 2,
-      'gl-align-items-center': level === 3,
+      'gl-border-t gl-py-3 gl-pl-7': level === 2,
     }"
   >
     <status-icon

spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap

@@ -49,7 +49,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
         name="MyWidget"
       />
       <div
-        class="gl-display-flex gl-w-full"
+        class="gl-display-flex gl-flex-direction-column gl-w-full"
       >
         <div
           class="gl-display-flex gl-flex-grow-1"
@@ -88,7 +88,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
         >
           <li>
             <div
-              class="gl-align-items-center gl-display-flex"
+              class="gl-align-items-baseline gl-display-flex"
             >
               <div
                 class="gl-min-w-0 gl-w-full"
@@ -110,7 +110,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
                   class="gl-align-items-baseline gl-display-flex"
                 >
                   <div
-                    class="gl-display-flex gl-w-full"
+                    class="gl-display-flex gl-flex-direction-column gl-w-full"
                   >
                     <div
                       class="gl-display-flex gl-flex-grow-1"