Use utility classes and nest props for list

- Use utility classes in the summary row instead
of the original classes. This makes it easier to
override individual classes.
- Add a `nested-level` prop for the issues list so
that we can nest according to the padding we want.

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

@@ -172,7 +172,7 @@ export default {
             :new-issues="newIssues(report)"
             :resolved-issues="resolvedIssues(report)"
             :component="$options.componentNames.TestIssueBody"
-            class="report-block-group-list gl-pl-8"
+            :nested-level="2"
           />
         </template>
         <modal

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

@@ -67,6 +67,11 @@ export default {
       required: false,
       default: null,
     },
+    nestedLevel: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   computed: {
     issuesWithState() {
@@ -80,6 +85,12 @@ export default {
     wclass() {
       return `report-block-list ${this.issuesUlElementClass}`;
     },
+    listClasses() {
+      return {
+        'gl-pl-7': this.nestedLevel === 1,
+        'gl-pl-8': this.nestedLevel === 2,
+      };
+    },
   },
 };
 </script>
@@ -89,6 +100,7 @@ export default {
     :remain="$options.maxShownReportItems"
     :size="$options.typicalReportItemHeight"
     class="report-block-container"
+    :class="listClasses"
     wtag="ul"
     :wclass="wclass"
   >

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

@@ -49,18 +49,9 @@ export default {
     },
     rowClasses() {
       if (!this.nestedSummary) {
-        return ['report-block-list-issue', 'report-block-list-issue-parent'];
+        return ['gl-px-5'];
       }
-      return [
-        'gl-display-flex',
-        'gl-pl-7',
-        'gl-py-3',
-        'gl-pr-3',
-        'gl-border-t-solid',
-        'gl-border-t-gray-100',
-        'gl-border-t-1',
-        { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING },
-      ];
+      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
     },
     statusIconSize() {
       if (!this.nestedSummary) {
@@ -72,7 +63,10 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-align-items-center" :class="rowClasses">
+  <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'"