Merge branch 'ph/fixNewMRDiffsSpacing' into 'master'

Fixed spacing issues in MR creation diff

See merge request gitlab-org/gitlab!67029

app/assets/javascripts/merge_request_tabs.js

@@ -82,9 +82,9 @@ export default class MergeRequestTabs {
       this.mergeRequestTabPanes && this.mergeRequestTabPanes.querySelectorAll
         ? this.mergeRequestTabPanes.querySelectorAll('.tab-pane')
         : null;
-    const navbar = document.querySelector('.navbar-gitlab');
-    const peek = document.getElementById('js-peek');
-    const paddingTop = 16;
+    this.navbar = document.querySelector('.navbar-gitlab');
+    this.peek = document.getElementById('js-peek');
+    this.paddingTop = 16;
 
     this.commitsTab = document.querySelector('.tab-content .commits.tab-pane');
 
@@ -99,15 +99,6 @@ export default class MergeRequestTabs {
     this.setCurrentAction = this.setCurrentAction.bind(this);
     this.tabShown = this.tabShown.bind(this);
     this.clickTab = this.clickTab.bind(this);
-    this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0;
-
-    if (peek) {
-      this.stickyTop += peek.offsetHeight;
-    }
-
-    if (this.mergeRequestTabs) {
-      this.stickyTop += this.mergeRequestTabs.offsetHeight;
-    }
 
     if (stubLocation) {
       location = stubLocation;
@@ -520,4 +511,18 @@ export default class MergeRequestTabs {
       }
     }, 0);
   }
+
+  get stickyTop() {
+    let stickyTop = this.navbar ? this.navbar.offsetHeight : 0;
+
+    if (this.peek) {
+      stickyTop += this.peek.offsetHeight;
+    }
+
+    if (this.mergeRequestTabs) {
+      stickyTop += this.mergeRequestTabs.offsetHeight;
+    }
+
+    return stickyTop;
+  }
 }

app/assets/stylesheets/framework/diffs.scss

@@ -854,12 +854,12 @@ table.code {
   @include media-breakpoint-up(sm) {
     position: -webkit-sticky;
     position: sticky;
-    top: $header-height;
+    top: $header-height + $mr-tabs-height;
     background-color: $white;
     z-index: 200;
 
     .with-performance-bar & {
-      top: $header-height + $performance-bar-height;
+      top: $header-height + $mr-tabs-height + $performance-bar-height;
     }
 
     &.is-stuck {

app/assets/stylesheets/pages/merge_requests.scss

@@ -1003,10 +1003,10 @@ $tabs-holder-z-index: 250;
 
 .mr-compare {
   .diff-file .file-title-flex-parent {
-    top: $header-height + 51px;
+    top: $header-height + $mr-tabs-height + 36px;
 
     .with-performance-bar & {
-      top: $performance-bar-height + $header-height + 51px;
+      top: $performance-bar-height + $header-height + $mr-tabs-height + 36px;
     }
   }
 }

app/helpers/commits_helper.rb

@@ -215,7 +215,7 @@ module CommitsHelper
     path = project_blob_path(project, tree_join(commit_sha, diff_new_path))
     title = replaced ? _('View replaced file @ ') : _('View file @ ')
 
-    link_to(path, class: 'btn gl-button btn-default') do
+    link_to(path, class: 'btn gl-button btn-default gl-ml-3') do
       raw(title) + content_tag(:span, truncate_sha(commit_sha), class: 'commit-sha')
     end
   end

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

@@ -16,7 +16,7 @@
     - unless diff_file.submodule?
       .file-actions.gl-display-none.gl-sm-display-flex
         - if diff_file.blob&.readable_text?
-          %span.has-tooltip.gl-mr-3{ title: _("Toggle comments for this file") }
+          %span.has-tooltip{ title: _("Toggle comments for this file") }
             = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do
               = sprite_icon('comment')
           \

app/views/projects/merge_requests/creations/_new_submit.html.haml

@@ -40,7 +40,7 @@
     #diff-notes-app.tab-content
       #new.commits.tab-pane.active
         = render "projects/merge_requests/commits"
-      #diffs.diffs.tab-pane
+      #diffs.diffs.tab-pane{ class: "gl-m-0!" }
         -# This tab is always loaded via AJAX
       - if @pipelines.any?
         #pipelines.pipelines.tab-pane

ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js

@@ -6,5 +6,7 @@ export default () => {
   const editMrApp = mountApprovals(document.getElementById('js-mr-approvals-input'));
   mountBlockingMergeRequestsInput(document.getElementById('js-blocking-merge-requests-input'));
 
-  editMrApp.$on('hidden-inputs-mounted', initCheckFormState);
+  if (editMrApp) {
+    editMrApp.$on('hidden-inputs-mounted', initCheckFormState);
+  }
 };