Fix the account hovercard layout when users have a long "About Me" text Trim the whitespace and add an overflow. Before: https://imgur.com/a/KjQ2k30 After: https://imgur.com/a/i1ass1n Release-Notes: skip Google-Bug-Id: b/267986761 Change-Id: I1568225134c0b902804e7e5992d3de9412e9cba0

diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts
index abc7f3c..2730fcf 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents.ts

@@ -160,6 +160,12 @@
         .status .value {
           white-space: pre-wrap;
         }
+        /* Make sure that users cannot break the layout with super long
+           "About Me" texts. */
+        div.status {
+          max-height: 8em;
+          overflow-y: auto;
+        }
       `,
     ];
   }
@@ -273,7 +279,7 @@
     return html`
       <div class="status">
         <span class="title">About me:</span>
-        <span class="value">${this.account.status}</span>
+        <span class="value">${this.account.status.trim()}</span>
       </div>
     `;
   }

diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts
index a1ac781..bd47ec8 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account-contents_test.ts

@@ -38,7 +38,7 @@
     email: 'kermit@gmail.com' as EmailAddress,
     username: 'kermit',
     name: 'Kermit The Frog',
-    status: 'I am a frog',
+    status: '  I am a frog  ',
     _account_id: 31415926535 as AccountId,
   };