Fix broken layout on compare branches page

app/assets/stylesheets/pages/projects.scss

@@ -1006,7 +1006,7 @@ pre.light-well {
     margin-top: -20px;
 
     @include media-breakpoint-up(sm) {
-      margin-top: 0;
+      margin: 0 $gl-padding-8 0;
       width: auto;
     }
   }

app/views/projects/compare/_form.html.haml

 = form_tag project_compare_index_path(@project), method: :post, class: 'form-inline js-requires-input js-signature-container', data: { 'signatures-path' => signatures_namespace_project_compare_index_path } do
-  .clearfix
   - if params[:to] && params[:from]
     .compare-switch-container
       = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'

app/views/projects/diffs/_diffs.html.haml

@@ -15,7 +15,7 @@
         - elsif current_controller?('projects/merge_requests/diffs')
           = diff_merge_request_whitespace_link(diffs.project, @merge_request, class: 'd-none d-sm-block')
         - elsif current_controller?(:compare)
-          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-block')
+          = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-inline-block')
       .btn-group
         = inline_diff_btn
         = parallel_diff_btn