Refactor TestReports specific table css

Moved the hover effect and color into response_tables.scss

app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue

@@ -64,14 +64,14 @@ export default {
         v-for="(testSuite, index) in getTestSuites"
         :key="index"
         role="row"
-        class="gl-responsive-table-row test-reports-summary-row rounded cursor-pointer js-suite-row"
+        class="gl-responsive-table-row gl-responsive-table-row-clickable test-reports-summary-row rounded cursor-pointer js-suite-row"
         @click="tableRowClick(testSuite)"
       >
         <div class="table-section section-25">
           <div role="rowheader" class="table-mobile-header font-weight-bold">
             {{ __('Suite') }}
           </div>
-          <div class="table-mobile-content test-reports-summary-suite cgray pl-3">
+          <div class="table-mobile-content underline cgray pl-3">
             {{ testSuite.name }}
           </div>
         </div>

app/assets/stylesheets/framework/responsive_tables.scss

@@ -20,6 +20,17 @@
   @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
+  color: $gray-700;
+
+  &.gl-responsive-table-row-clickable {
+    &:hover {
+      background-color: $gray-light;
+
+      .underline {
+        text-decoration: underline;
+      }
+    }
+  }
 
   @include media-breakpoint-up(md) {
     margin: 0;

app/assets/stylesheets/pages/pipelines.scss

@@ -1084,18 +1084,6 @@ button.mini-pipeline-graph-dropdown-toggle {
 }
 
 .test-reports-table {
-  color: $gray-700;
-
-  .test-reports-summary-row {
-    &:hover {
-      background-color: $gray-light;
-
-      .test-reports-summary-suite {
-        text-decoration: underline;
-      }
-    }
-  }
-
   .build-trace {
     @include build-trace();
   }