1 files changed, 20 insertions, 12 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
index cdce7c6625a..ec979861283 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
@@ -30,6 +30,11 @@ export default {
       required: false,
       default: 2,
     },
+    rowIndex: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
   },
   computed: {
     statusIcon() {
@@ -44,6 +49,9 @@ export default {
     generatedSupportingText() {
       return generateText(this.data.supportingText);
     },
+    shouldShowThirdLevel() {
+      return this.data.children?.length > 0 && this.level === 2;
+    },
   },
   methods: {
     onClickedAction(action) {
@@ -60,16 +68,19 @@ export default {
     :widget-name="widgetName"
     :header="data.header"
     :help-popover="data.helpPopover"
+    :class="{ 'gl-border-top-0': rowIndex === 0 }"
   >
     <template #body>
-      <div class="gl-display-flex gl-flex-direction-column">
-        <div>
-          <p v-safe-html="generatedText" class="gl-mb-0"></p>
-          <gl-link v-if="data.link" :href="data.link.href">{{ data.link.text }}</gl-link>
-          <p v-if="data.supportingText" v-safe-html="generatedSupportingText" class="gl-mb-0"></p>
-          <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
-            {{ data.badge.text }}
-          </gl-badge>
+      <div class="gl-w-full gl-display-flex" :class="{ 'gl-flex-direction-column': level === 1 }">
+        <div class="gl-display-flex gl-flex-grow-1">
+          <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column">
+            <p v-safe-html="generatedText" class="gl-mb-0 gl-mr-1"></p>
+            <gl-link v-if="data.link" :href="data.link.href">{{ data.link.text }}</gl-link>
+            <p v-if="data.supportingText" v-safe-html="generatedSupportingText" class="gl-mb-0"></p>
+            <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
+              {{ data.badge.text }}
+            </gl-badge>
+          </div>
           <actions
             :widget="widgetName"
             :tertiary-buttons="data.actions"
@@ -78,10 +89,7 @@ export default {
           />
           <p v-if="data.subtext" v-safe-html="generatedSubtext" class="gl-m-0 gl-font-sm"></p>
         </div>
-        <ul
-          v-if="data.children && data.children.length > 0 && level === 2"
-          class="gl-m-0 gl-p-0 gl-list-style-none"
-        >
+        <ul v-if="shouldShowThirdLevel" class="gl-m-0 gl-p-0 gl-list-style-none">
           <li v-for="(childData, index) in data.children" :key="childData.id || index">
             <dynamic-content
               :data="childData"