Improve reply rendering

Signed-off-by: Tulir Asokan <tulir@maunium.net>

res/css/views/rooms/_ReplyTile.scss

@@ -0,0 +1,96 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ReplyTile {
+    max-width: 100%;
+    clear: both;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    font-size: 14px;
+    position: relative;
+    line-height: 16px;
+}
+
+.mx_ReplyTile > a {
+    display: block;
+    text-decoration: none;
+    color: $primary-fg-color;
+}
+
+// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
+.mx_ReplyTile .mx_EventTile_content {
+    $reply-lines: 2;
+    $line-height: 22px;
+
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $reply-lines;
+    line-height: $line-height;
+
+    .mx_EventTile_body.mx_EventTile_bigEmoji {
+        line-height: $line-height !important;
+        // Override the big emoji override
+        font-size: 14px !important;
+    }
+}
+
+.mx_ReplyTile.mx_ReplyTile_info {
+    padding-top: 0px;
+}
+
+.mx_ReplyTile .mx_SenderProfile {
+    color: $primary-fg-color;
+    font-size: 14px;
+    display: inline-block; /* anti-zalgo, with overflow hidden */
+    overflow: hidden;
+    cursor: pointer;
+    padding-left: 0px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 17px;
+    /* the next three lines, along with overflow hidden, truncate long display names */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 65px);
+}
+
+.mx_ReplyTile_redacted .mx_UnknownBody {
+    --lozenge-color: $event-redacted-fg-color;
+    --lozenge-border-color: $event-redacted-border-color;
+    display: block;
+    height: 22px;
+    width: 250px;
+    border-radius: 11px;
+    background:
+        repeating-linear-gradient(
+            -45deg,
+            var(--lozenge-color),
+            var(--lozenge-color) 3px,
+            transparent 3px,
+            transparent 6px
+        );
+    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
+}
+
+.mx_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody {
+    opacity: 0.4;
+}
+
+.mx_ReplyTile_contextual {
+    opacity: 0.4;
+}