Fix overlapping text in gr-message

Previously, the amount of space the date took up on the screen was
estimated, but different types of formatting (time with AM/PM vs Date)
took up different amounts of space. Estimating was not working. Instead,
update the collapsed message to use flexbox. The message content
shrinks/expands when the width of the page changes, and will fit
regardless of the width of the date in a particular message. This change
also displays text content in a regular div while collpased rather than
gr-formatted-text so that it can be constrained to a single line.

Bug: Issue 4608
Change-Id: Id34b93c33b376d522f1d396a69133f854ad4dbf6

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

diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index 2fccfe43..1afd548 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -39,9 +39,10 @@
         left: var(--default-horizontal-margin);
       }
       .collapsed .contentContainer {
+        align-items: baseline;
         color: #777;
-        height: 4.5em;
-        overflow: hidden;
+        display: flex;
+        white-space: nowrap;
       }
       .showAvatar.expanded .contentContainer {
         margin-left: calc(var(--default-horizontal-margin) + 2.5em);
@@ -50,10 +51,6 @@
       .showAvatar.collapsed .contentContainer {
         margin-left: calc(var(--default-horizontal-margin) + 1.75em);
       }
-      .showAvatar.collapsed .contentContainer,
-      .hideAvatar.collapsed .contentContainer {
-        margin-right: calc(var(--default-horizontal-margin) + 2.25em);
-      }
       .hideAvatar.collapsed .contentContainer,
       .hideAvatar.expanded .contentContainer {
         margin-left: 0;
@@ -86,11 +83,26 @@
         display: inline;
       }
       .collapsed gr-comment-list,
-      .collapsed .replyContainer {
+      .collapsed .replyContainer,
+      .collapsed .hideOnCollapsed,
+      .hideOnOpen {
         display: none;
       }
+      .collapsed .hideOnOpen {
+        display: block;
+      }
+      .collapsed .content {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .collapsed .date {
+        position: static;
+      }
       .collapsed .name {
         color: var(--default-text-color);
+        margin-right: .4em;
       }
       .expanded .name {
         cursor: pointer;
@@ -111,8 +123,9 @@
         <div class="name" on-tap="_handleNameTap">[[author.name]]</div>
         <template is="dom-if" if="[[message.message]]">
           <div class="content">
+            <div class="message hideOnOpen">[[message.message]]</div>
             <gr-formatted-text
-                class="message"
+                class="message hideOnCollapsed"
                 content="[[message.message]]"
                 config="[[projectConfig.commentlinks]]"></gr-formatted-text>
             <gr-comment-list
@@ -126,10 +139,12 @@
           </a>
         </template>
         <template is="dom-if" if="[[message.reviewer]]">
-          set reviewer status for
-          <gr-account-chip account="[[message.reviewer]]">
-          </gr-account-chip>
-          to [[message.state]].
+          <div class="content">
+            set reviewer status for
+            <gr-account-chip account="[[message.reviewer]]">
+            </gr-account-chip>
+            to [[message.state]].
+          </div>
           <gr-date-formatter class="date" date-str="[[message.updated]]">
           </gr-date-formatter>
         </template>