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
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>
