Improve diff navigation header57364-improve-diff-nav-header

- Compare versions header is full width except in the unified diff mode
with no tree sidebar
  - Bar is always full width, but the content within stays centered when
unified and no tree sidebar
- File header is the same height as the "Compare versions header"
- aligns with the design system grid guidelines => 56px
- Diff file headers use a button group, switch icon order to open file
externally being the last option, all buttons will become icon buttons
(icon delivery by @dimitrieh)
- If a file header becomes sticky no rounded corner/double border
problem is visible anymore

1 files changed, 20 insertions, 0 deletions

diff --git a/spec/javascripts/diffs/components/compare_versions_spec.js b/spec/javascripts/diffs/components/compare_versions_spec.js
index e886f962d2f..77f8352047c 100644
--- a/spec/javascripts/diffs/components/compare_versions_spec.js
+++ b/spec/javascripts/diffs/components/compare_versions_spec.js
@@ -66,6 +66,26 @@ describe('CompareVersions', () => {
       expect(inlineBtn.innerHTML).toContain('Inline');
       expect(parallelBtn.innerHTML).toContain('Side-by-side');
     });
+
+    it('adds container-limiting classes when showFileTree is false with inline diffs', () => {
+      vm.isLimitedContainer = true;
+
+      vm.$nextTick(() => {
+        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
+
+        expect(limitedContainer).not.toBeNull();
+      });
+    });
+
+    it('does not add container-limiting classes when showFileTree is false with inline diffs', () => {
+      vm.isLimitedContainer = false;
+
+      vm.$nextTick(() => {
+        const limitedContainer = vm.$el.querySelector('.container-limited.limit-container-width');
+
+        expect(limitedContainer).toBeNull();
+      });
+    });
   });
 
   describe('setInlineDiffViewType', () => {