Fixes styling issues in test reports

In the Merge Request widget, the reports for tests
had an extra border.
The loading icon in the mr widget used in all
report sections had an extra margin causing text
to be misaligned.
This commit fixes both issues

Closes #52147

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -268,11 +268,11 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
-    <div class="mr-section-container">
     <grouped-test-reports-app
       v-if="mr.testResultsPath"
       :endpoint="mr.testResultsPath"
     />
+    <div class="mr-section-container">
       <div class="mr-widget-section">
         <component
           :is="componentName"

app/assets/stylesheets/pages/merge_requests.scss

@@ -201,7 +201,6 @@
 
   .mr-widget-icon {
     font-size: 22px;
-    margin-right: $gl-btn-padding;
   }
 
   .ci-status-icon svg {

changelogs/unreleased/52147-loading-state.yml

+---
+title: Removes extra border from test reports in the merge request widget
+merge_request:
+author:
+type: fixed