Fix text overflow in account labels The text overflow with ellipsis did not work when the user had a status set. So we have to move the css rules for text-overflow directly into the name span. That also means that the max-width has to be specified for the name span directly. So the values for the account-max-length variable have to be reduced accordingly. There was also a problem in the attention detail section of the reply dialog with the line height and the vertical alignment. Bug: Issue 13392 Change-Id: I2d1e2e2ca2a0b22e9d7e88cc9a9133cbe6b8541f

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
index fdb4534..f1e75e4 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts

@@ -54,7 +54,7 @@
       white-space: nowrap;
     }
     .reviewers {
-      --account-max-length: 90px;
+      --account-max-length: 70px;
     }
     .spacer {
       height: 0;

diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
index 2cdbd76..f356d99 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts

@@ -99,7 +99,7 @@
       --linked-chip-text-color: var(--link-color);
     }
     gr-reviewer-list {
-      --account-max-length: 120px;
+      --account-max-length: 100px;
       max-width: 285px;
     }
     .metadata-title {

diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts
index 15e461a..2fca13d 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts

@@ -176,13 +176,9 @@
          great solution. */
       line-height: 26px;
     }
-    .attention-detail .peopleList .accountList {
-      display: flex;
-      flex-wrap: wrap;
-    }
     .attentionSummary gr-account-label,
     .attention-detail gr-account-label {
-      --account-max-length: 150px;
+      --account-max-length: 120px;
       display: inline-block;
       padding: var(--spacing-xs) var(--spacing-m);
       user-select: none;
@@ -193,8 +189,11 @@
       line-height: var(--line-height-normal);
       vertical-align: top;
     }
+    .attention-detail .peopleListValues {
+      line-height: calc(var(--line-height-normal) + 10px);
+    }
     .attention-detail gr-account-label {
-      vertical-align: baseline;
+      line-height: var(--line-height-normal);
     }
     .attentionSummary gr-account-label:focus,
     .attention-detail gr-account-label:focus {
@@ -478,7 +477,7 @@
         </div>
         <div class="peopleList">
           <div class="peopleListLabel">Owner</div>
-          <div>
+          <div class="peopleListValues">
             <gr-account-label
               account="[[_owner]]"
               force-attention="[[_computeHasNewAttention(_owner, _newAttentionSet)]]"
@@ -493,7 +492,7 @@
         <template is="dom-if" if="[[_uploader]]">
           <div class="peopleList">
             <div class="peopleListLabel">Uploader</div>
-            <div>
+            <div class="peopleListValues">
               <gr-account-label
                 account="[[_uploader]]"
                 force-attention="[[_computeHasNewAttention(_uploader, _newAttentionSet)]]"
@@ -508,7 +507,7 @@
         </template>
         <div class="peopleList">
           <div class="peopleListLabel">Reviewers</div>
-          <div>
+          <div class="peopleListValues">
             <template
               is="dom-repeat"
               items="[[_removeServiceUsers(_reviewers, _newAttentionSet)]]"
@@ -529,7 +528,7 @@
         <template is="dom-if" if="[[_attentionCcsCount]]">
           <div class="peopleList">
             <div class="peopleListLabel">CC</div>
-            <div>
+            <div class="peopleListValues">
               <template
                 is="dom-repeat"
                 items="[[_removeServiceUsers(_ccs, _newAttentionSet)]]"

diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts
index 39447ad..363be24 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts

@@ -23,11 +23,8 @@
       vertical-align: top;
       position: relative;
       border-radius: var(--label-border-radius);
-      max-width: var(--account-max-length, 200px);
       box-sizing: border-box;
       white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
       padding: 0 var(--account-label-padding-horizontal, 0);
     }
     /* If the first element is the avatar, then we cancel the left padding, so
@@ -85,6 +82,13 @@
       position: relative;
       top: 2px;
     }
+    .name {
+      display: inline-block;
+      vertical-align: top;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: var(--account-max-length, 180px);
+    }
     .hasAttention .name {
       font-weight: var(--font-weight-bold);
     }

diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
index 5b188d1..d6992c8 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts

@@ -239,7 +239,7 @@
       --gr-account-label-text-style: {
         font-weight: var(--font-weight-bold);
       }
-      --account-max-length: 120px;
+      --account-max-length: 100px;
       width: 120px;
     }
     .draft gr-account-label {

diff --git a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
index 2282c74..c640d23 100644
--- a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts

@@ -68,7 +68,7 @@
       color: var(--border-color);
     }
     gr-account-link {
-      --account-max-length: 120px;
+      --account-max-length: 100px;
       margin-right: var(--spacing-xs);
     }
     iron-icon {

diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.ts b/polygerrit-ui/app/styles/gr-change-list-styles.ts
index 6de4e6f..d1fcdc9 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.ts
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.ts

@@ -82,7 +82,7 @@
         vertical-align: middle;
       }
       .owner {
-        --account-max-length: 120px;
+        --account-max-length: 100px;
       }
       .branch,
       .star,