Improve diff navigation 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, 3 insertions, 3 deletions

diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 2084c36e484..da012e1d5f7 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -2,7 +2,7 @@ import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import MockAdapter from 'axios-mock-adapter';
 import { faviconDataUrl, overlayDataUrl, faviconWithOverlayDataUrl } from './mock_data';
-import BreakpointInstance from '~/breakpoints';
+import breakpointInstance from '~/breakpoints';
 
 const PIXEL_TOLERANCE = 0.2;
 
@@ -383,7 +383,7 @@ describe('common_utils', () => {
 
   describe('contentTop', () => {
     it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => {
-      spyOn(BreakpointInstance, 'getBreakpointSize').and.returnValue('sm');
+      spyOn(breakpointInstance, 'isDesktop').and.returnValue(false);
 
       setFixtures(`
         <div class="diff-file file-title-flex-parent">
@@ -398,7 +398,7 @@ describe('common_utils', () => {
     });
 
     it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => {
-      spyOn(BreakpointInstance, 'getBreakpointSize').and.returnValue('lg');
+      spyOn(breakpointInstance, 'isDesktop').and.returnValue(true);
 
       setFixtures(`
         <div class="diff-file file-title-flex-parent">