De-emphasize nested reports in MR widget

Add nested padding to the nested reports in the
MR widgets that have multiple reports with issue lists.

app/assets/javascripts/reports/components/grouped_test_reports_app.vue

@@ -151,7 +151,12 @@ export default {
     <template #body>
       <div class="mr-widget-grouped-section report-block">
         <template v-for="(report, i) in reports">
-          <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)">
+          <summary-row
+            :key="`summary-row-${i}`"
+            :status-icon="getReportIcon(report)"
+            :status-icon-size="16"
+            class="gl-pl-7! gl-py-3!"
+          >
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">
                 <div>{{ reportText(report) }}</div>
@@ -168,7 +173,7 @@ export default {
             :new-issues="newIssues(report)"
             :resolved-issues="resolvedIssues(report)"
             :component="$options.componentNames.TestIssueBody"
-            class="report-block-group-list"
+            class="report-block-group-list gl-pl-8"
           />
         </template>
         <modal

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
@@ -28,6 +29,11 @@ export default {
       type: String,
       required: true,
     },
+    statusIconSize: {
+      type: Number,
+      required: false,
+      default: 24,
+    },
     popoverOptions: {
       type: Object,
       required: false,
@@ -41,18 +47,26 @@ export default {
         icon: `status_${this.statusIcon}`,
       };
     },
+    rowClasses() {
+      return {
+        'gl-bg-gray-10': this.statusIcon === ICON_WARNING,
+      };
+    },
   },
 };
 </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="report-block-list-issue report-block-list-issue-parent 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" />
     </div>
     <div class="report-block-list-issue-description">
       <div