Fix gr-commit-info spacing

- Reorder information in change header
- Use separator in change header
- Use negative margin equivalent to the padding-right of the button
  within gr-copy-clipboard on gr-commit-info where whitespace needs to
  be consistent

Bug: Issue 8026
Change-Id: I9739bf4af64e8c338f85cbb6ea5cd4fcd39a4dd8

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

@@ -76,7 +76,10 @@ limitations under the License.
       }
       gr-change-status {
         display: initial;
-        margin: .1em .5em .1em 0;
+        margin: .1em .1em .1em .4em;
+      }
+      gr-change-status:first-child {
+        margin-left: 0;
       }
       .header-title {
         align-items: center;
@@ -144,7 +147,9 @@ limitations under the License.
         }
       }
       .changeStatuses,
-      .commitActions {
+      .changeText,
+      .commitActions,
+      .statusText {
         align-items: center;
         display: flex;
       }
@@ -225,6 +230,7 @@ limitations under the License.
       }
       gr-commit-info {
         display: inline-block;
+        margin-right: -5px;
       }
       @media screen and (min-width: 80em) {
         .commitMessage {
@@ -327,19 +333,22 @@ limitations under the License.
                   status="[[status]]"></gr-change-status>
             </template>
           </div>
+          <div class="statusText">
+            <template
+                is="dom-if"
+                if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
+              <span class="text"> as </span>
+              <gr-commit-info
+                  change="[[_change]]"
+                  commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
+                  server-config="[[_serverConfig]]"></gr-commit-info>
+            </template>
+          </div>
+          <span class="separator"></span>
           <div class="changeText">
             <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
-                href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a><!--
-         --><template
-                is="dom-if"
-                if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]"><!--
-           --><span class="text"> ([[_changeStatus]] as </span><!--
-             --><gr-commit-info
-                    change="[[_change]]"
-                    commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
-                    server-config="[[_serverConfig]]"></gr-commit-info>)<!--
-         --></template><!--
-         --><span class="text">: </span><span class="headerSubject">[[_change.subject]]</span>
+                href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a>
+            <span class="headerSubject">: [[_change.subject]]</span>
           </div>
         </div><!-- end header-title -->
         <div class="commitActions" hidden$="[[!_loggedIn]]">

polygerrit-ui/app/elements/change/gr-commit-info/gr-commit-info.html

@@ -25,9 +25,6 @@ limitations under the License.
         align-items: center;
         display: flex;
       }
-      gr-copy-clipboard {
-        padding-left: .5em;
-      }
     </style>
     <div class="container">
       <template is="dom-if" if="[[_showWebLink]]">

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html

@@ -135,6 +135,9 @@ limitations under the License.
         font-family: var(--font-family-bold);
         margin-right: 24px;
       }
+      gr-commit-info {
+        margin-right: -5px;
+      }
       @media screen and (max-width: 50em) {
         .patchInfo-header .desktop {
           display: none;