Merge "Rework whitespace usage for related changes"

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html

@@ -40,20 +40,28 @@ limitations under the License.
   <template>
     <style include="gr-voting-styles"></style>
     <style include="shared-styles">
-      .hideDisplay {
+      :host {
-        display: none;
+        display: table;
+      }
+      section {
+        display: table-row;
+      }
+      section:not(:first-of-type) .title,
+      section:not(:first-of-type) .value {
+        padding-top: .5em;
       }
       section:not(:first-of-type) {
         margin-top: 1em;
       }
       .title,
       .value {
-        display: block;
+        display: table-cell;
       }
       .title {
         color: var(--deemphasized-text-color);
         font-family: var(--font-family-bold);
         max-width: 20em;
+        padding-right: .5em;
         word-break: break-word;
       }
       gr-account-link {
@@ -126,6 +134,7 @@ limitations under the License.
       .parentList gr-commit-info {
         display: inline-block;
       }
+      .hideDisplay,
       #parentNotCurrentMessage {
         display: none;
       }
@@ -133,25 +142,6 @@ limitations under the License.
         --arrow-color: #ffa62f;
         display: inline-block;
       }
-      @media screen and (max-width: 50em), screen and (min-width: 75em) {
-        :host {
-          display: table;
-        }
-        section {
-          display: table-row;
-        }
-        section:not(:first-of-type) .title,
-        section:not(:first-of-type) .value {
-          padding-top: .5em;
-        }
-        .title,
-        .value {
-          display: table-cell;
-        }
-        .title {
-          padding-right: .5em;
-        }
-      }
     </style>
     <gr-external-style id="externalStyle" name="change-metadata">
       <section>

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html

@@ -116,13 +116,12 @@ limitations under the License.
         font-family: var(--font-family);
         margin-top: 1em;
       }
-      .changeInfo-column:not(:last-of-type) {
+      .changeInfo-column {
-        margin-right: 1em;
+        padding: 0 1em;
-        padding-right: 1em;
       }
       .changeMetadata {
         border-right: 1px solid var(--border-color);
-        font-size: .95rem;
+        font-size: var(--font-size-small);
         padding: 1em 0;
       }
       /* Prevent plugin text from overflowing. */
@@ -191,7 +190,7 @@ limitations under the License.
         overflow: hidden;
       }
       #relatedChanges {
-        font-size: .9rem;
+        font-size: var(--font-size-small);
       }
       #relatedChanges.collapsed {
         margin-bottom: 1.1em;
@@ -255,9 +254,19 @@ limitations under the License.
           max-width: var(--commit-message-max-width, 100ch);
         }
       }
+      #metadata {
+        padding-right: 1em;
+      }
       /* NOTE: If you update this breakpoint, also update the
       BREAKPOINT_RELATED_MED in the JS */
-      @media screen and (max-width: 60em) {
+      @media screen and (max-width: 75em) {
+        .relatedChanges {
+          padding: 0;
+        }
+        #relatedChanges {
+          border-top: 1px solid var(--border-color);
+          padding-top: 1em;
+        }
         #commitAndRelated {
           flex-direction: column;
           flex-wrap: nowrap;

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js

@@ -32,7 +32,7 @@
   // These are the same as the breakpoint set in CSS. Make sure both are changed
   // together.
   const BREAKPOINT_RELATED_SMALL = '50em';
-  const BREAKPOINT_RELATED_MED = '60em';
+  const BREAKPOINT_RELATED_MED = '75em';
 
   // In the event that the related changes medium width calculation is too close
   // to zero, provide some height.

polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html

@@ -1321,7 +1321,7 @@ limitations under the License.
         sandbox.stub(element, '_getOffsetHeight', () => 50);
         sandbox.stub(element, '_getLineHeight', () => 12);
         sandbox.stub(window, 'matchMedia', () => {
-          if (window.matchMedia.lastCall.args[0] === '(max-width: 60em)') {
+          if (window.matchMedia.lastCall.args[0] === '(max-width: 75em)') {
             return {matches: true};
           } else {
             return {matches: false};

polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.html

@@ -97,16 +97,9 @@ limitations under the License.
         .mobile {
           display: block;
         }
-        hr {
-          border: 0;
-          border-top: 1px solid var(--border-color);
-          height: 0;
-          margin-bottom: 1em;
-        }
       }
     </style>
     <div>
-      <hr class="mobile">
       <section class="relatedChanges" hidden$="[[!_relatedResponse.changes.length]]" hidden>
         <h4>Relation chain</h4>
         <template