Merge "Prevent diff view nav links from overflowing the header"

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts
index adfc532..9c7ec81 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts
@@ -536,6 +536,7 @@
         .headerLeft {
           display: flex;
           align-items: center;
+          min-width: 0;
         }
         gr-patch-range-select {
           display: block;
@@ -571,7 +572,9 @@
           margin-right: var(--spacing-m);
           font-weight: var(--font-weight-medium);
           white-space: nowrap;
-          overflow: auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 100;
         }
         .patchRangeLeft {
           align-items: center;
@@ -595,6 +598,8 @@
         .jumpToFileContainer {
           display: inline-block;
           word-break: break-all;
+          min-width: 0;
+          overflow: hidden;
         }
         .mobile {
           display: none;
@@ -920,11 +925,9 @@
             >${this.changeNum}</a
           ><span class="changeNumberColon">:</span>
         </div>
-        <div>
-          <span class="headerSubject"
-            >${trimWithEllipsis(this.change?.subject, 80)}</span
-          >
-        </div>
+        <span class="headerSubject"
+          >${trimWithEllipsis(this.change?.subject, 80)}</span
+        >
         <div class="checkboxDiv">
           <md-checkbox
             id="reviewed"

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.ts

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.ts b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.ts
index 1d5a9b5..e19a98c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.ts
@@ -246,9 +246,7 @@
                   <a href="/c/test-project/+/42"> 42 </a>
                   <span class="changeNumberColon"> : </span>
                 </div>
-                <div>
-                  <span class="headerSubject"> Test subject </span>
-                </div>
+                <span class="headerSubject"> Test subject </span>
                 <div class="checkboxDiv">
                   <md-checkbox
                     class="hideOnEdit reviewed"
@@ -421,6 +419,51 @@
       );
     });
 
+    test('nav links stay inside the header when space runs out', async () => {
+      element.change = {
+        ...createParsedChange(),
+        subject:
+          'A change subject that is long enough to overflow a narrow header',
+      };
+      element.path =
+        'polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.ts';
+      element.files = getFilesFromFileList([element.path]);
+      const forceDesktop = document.createElement('style');
+      forceDesktop.textContent = '.navLinks.desktop { display: flex; }';
+      element.shadowRoot!.appendChild(forceDesktop);
+      await element.updateComplete;
+
+      const header = queryAndAssert(element, 'header');
+      const navLinks = queryAndAssert(element, '.navLinks');
+      const subject = queryAndAssert(element, '.headerSubject');
+      assert.notEqual(getComputedStyle(navLinks).display, 'none');
+      const naturalSubjectWidth = subject.getBoundingClientRect().width;
+
+      element.style.width = '600px';
+      await element.updateComplete;
+
+      assert.isAtMost(
+        navLinks.getBoundingClientRect().right,
+        header.getBoundingClientRect().right,
+        'nav links overflow the header'
+      );
+      assert.isAtMost(
+        header.scrollWidth,
+        header.clientWidth,
+        'header content overflows the header box'
+      );
+      assert.isBelow(
+        subject.getBoundingClientRect().width,
+        naturalSubjectWidth,
+        'subject should absorb the width deficit'
+      );
+      assert.isAbove(
+        subject.scrollWidth,
+        subject.clientWidth,
+        'subject should be ellipsized rather than pushing the nav links out'
+      );
+    });
+
     test('keyboard shortcuts', async () => {
       clock = sinon.useFakeTimers({
         toFake: ['Date'],