1 files changed, 25 insertions, 7 deletions
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 3232c0edf96..8eb43bcf1ba 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -2,6 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import { ICON_WARNING } from '../constants';
 
 /**
  * Renders the summary row for each report
@@ -19,6 +20,11 @@ export default {
     GlLoadingIcon,
   },
   props: {
+    nestedSummary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     summary: {
       type: String,
       required: false,
@@ -41,24 +47,36 @@ export default {
         icon: `status_${this.statusIcon}`,
       };
     },
+    rowClasses() {
+      if (!this.nestedSummary) {
+        return ['gl-px-5'];
+      }
+      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
+    },
+    statusIconSize() {
+      if (!this.nestedSummary) {
+        return 24;
+      }
+      return 16;
+    },
   },
 };
 </script>
 <template>
-  <div class="report-block-list-issue report-block-list-issue-parent align-items-center">
-    <div class="report-block-list-icon gl-mr-3">
+  <div
+    class="gl-border-t-solid gl-border-t-gray-100 gl-border-t-1 gl-py-3 gl-display-flex gl-align-items-center"
+    :class="rowClasses"
+  >
+    <div class="gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"
         size="md"
       />
-      <ci-icon v-else :status="iconStatus" :size="24" />
+      <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" />
     </div>
     <div class="report-block-list-issue-description">
-      <div
-        class="report-block-list-issue-description-text"
-        data-testid="test-summary-row-description"
-      >
+      <div class="report-block-list-issue-description-text" data-testid="summary-row-description">
         <slot name="summary">{{ summary }}</slot
         ><span v-if="popoverOptions" class="text-nowrap"
           >&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />