style widget sections with classes33095-mr-widget-ui

2 files changed, 12 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 90b9b0f7e44..7ab0776841b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -234,7 +234,7 @@ export default {
         v-if="shouldRenderDeployments"
         :mr="mr"
         :service="service" />
-      <div>
+      <div class="mr-widget-section">
         <component
           :is="componentName"
           :mr="mr"
@@ -244,7 +244,9 @@ export default {
           :state="mr.state"
           :related-links="mr.relatedLinks" />
       </div>
-      <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
+      <div class="mr-widget-footer" v-if="shouldRenderMergeHelp">
+        <mr-widget-merge-help />
+      </div>
     </div>
   `,
 };
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 475e6651cd2..735571f039b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -10,13 +10,19 @@ $status-icon-margin: $gl-btn-padding;
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
+  line-height: 28px;
 
-  > * {
+  .mr-widget-heading,
+  .mr-widget-section,
+  .mr-widget-footer {
     padding: 16px;
-    line-height: 28px;
     border-top: solid 1px $border-color;
   }
 
+  .mr-widget-footer {
+    padding: 0;
+  }
+
   form {
     margin-bottom: 0;
 
@@ -139,10 +145,6 @@ $status-icon-margin: $gl-btn-padding;
     @include clearfix;
   }
 
-  .mr-widget-footer {
-    margin: 16px;
-  }
-
   .mr-widget-pipeline-graph {
     flex-shrink: 0;
     padding: 0 4px;
@@ -364,10 +366,6 @@ $status-icon-margin: $gl-btn-padding;
     }
   }
 
-  .mr-widget-footer {
-    border-top: 1px solid $gray-darker;
-  }
-
   .ci-coverage {
     float: right;
   }