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'
-    .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
-      .input-group.inline-input-group
-        %span.input-group-prepend
-          .input-group-text
-            = s_("CompareBranches|Source")
-        = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-          .dropdown-toggle-text.str-truncated= params[:to] || _("Select branch/tag")
-      = render 'shared/ref_dropdown'
-    .compare-ellipsis.inline ...
-    .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
-      .input-group.inline-input-group
-        %span.input-group-prepend
-          .input-group-text
-            = s_("CompareBranches|Target")
-        = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-          .dropdown-toggle-text.str-truncated= params[:from] || _("Select branch/tag")
-      = render 'shared/ref_dropdown'
-     
-    = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn"
-    - if @merge_request.present?
-      = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn'
-    - elsif create_mr_button?
-      = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn'
+  - 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'
+  .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
+    .input-group.inline-input-group
+      %span.input-group-prepend
+        .input-group-text
+          = s_("CompareBranches|Source")
+      = hidden_field_tag :to, params[:to]
+      = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+        .dropdown-toggle-text.str-truncated= params[:to] || _("Select branch/tag")
+    = render 'shared/ref_dropdown'
+  .compare-ellipsis.inline ...
+  .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
+    .input-group.inline-input-group
+      %span.input-group-prepend
+        .input-group-text
+          = s_("CompareBranches|Target")
+      = hidden_field_tag :from, params[:from]
+      = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+        .dropdown-toggle-text.str-truncated= params[:from] || _("Select branch/tag")
+    = render 'shared/ref_dropdown'
+   
+  = button_tag s_("CompareBranches|Compare"), class: "btn btn-create commits-compare-btn"
+  - if @merge_request.present?
+    = link_to _("View open merge request"), project_merge_request_path(@project, @merge_request), class: 'prepend-left-10 btn'
+  - elsif create_mr_button?
+    = link_to _("Create merge request"), create_mr_path, class: 'prepend-left-10 btn'

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