Add related changes to third column

With appropriate wrapping on screen resize

Change-Id: I9ddb9d8cb7f3d7ef6ec8784df97a79ed95416480

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

@@ -108,6 +108,9 @@ limitations under the License.
       gr-reviewer-list {
         min-width: 25em;
       }
+      .changeMetadata {
+        margin-right: 1em;
+      }
       .changeMetadata-label {
         font-weight: bold;
       }
@@ -131,7 +134,7 @@ limitations under the License.
       }
       .commitMessage {
         font-family: var(--monospace-font-family);
-        margin-left: 1em;
+        margin-right: 2em;
         max-width: 72ch;
       }
       .commitMessage h4 {
@@ -140,18 +143,26 @@ limitations under the License.
         margin-bottom: .25em;
       }
       gr-file-list {
-        padding: 0 var(--default-horizontal-margin) 10px;
-      }
-      gr-related-changes-list {
-        border-top: 1px solid #ddd;
+        margin-bottom: 1em;
         padding: 0 var(--default-horizontal-margin);
       }
-      @media screen and (max-width: 55em) {
+      @media screen and (max-width: 80em) {
+        .changeInfo {
+          flex-wrap: wrap;
+        }
+      }
+      @media screen and (max-width: 60em) {
         .changeInfo {
           flex-direction: column;
+          flex-wrap: nowrap;
+        }
+        .changeMetadata,
+        .commitMessage,
+        gr-related-changes-list {
+          margin-right: 0;
+          margin-top: .25em;
         }
         .commitMessage {
-          margin-left: 0;
           max-width: none;
         }
       }
@@ -276,16 +287,16 @@ limitations under the License.
               content="[[_commitInfo.message]]"
               config="[[_projectConfig.commentlinks]]"></gr-linked-text>
         </div>
+        <gr-related-changes-list id="relatedChanges"
+            change="[[_change]]"
+            server-config="[[serverConfig]]"
+            patch-num="[[_patchNum]]"></gr-related-changes-list>
       </section>
       <gr-file-list id="fileList"
           change-num="[[_changeNum]]"
           patch-num="[[_patchNum]]"
           comments="[[_comments]]"
           selected-index="{{viewState.selectedFileIndex}}"></gr-file-list>
-      <gr-related-changes-list id="relatedChanges"
-          change="[[_change]]"
-          server-config="[[serverConfig]]"
-          patch-num="[[_patchNum]]"></gr-related-changes-list>
       <gr-messages-list id="messageList"
           change-num="[[_changeNum]]"
           messages="[[_change.messages]]"

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

@@ -82,7 +82,6 @@ limitations under the License.
         params="[[_computeSameTopicQueryParams(change.topic)]]"
         last-response="{{_sameTopic}}"></gr-ajax>
 
-    <h3>Related changes</h3>
     <div hidden$="[[!_loading]]">Loading...</div>
     <section class="relatedChanges" hidden$="[[!_relatedResponse.changes.length]]" hidden>
       <h4>Relation Chain</h4>