first iteration for message bubble layout

res/css/_components.scss

@@ -194,6 +194,7 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventBubbleTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/views/messages/_MImageBody.scss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_MImageBody {
     display: block;
-    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {

res/css/views/messages/_ReactionsRow.scss

@@ -26,6 +26,7 @@ limitations under the License.
         height: 24px;
         vertical-align: middle;
         margin-left: 4px;
+        margin-right: 4px;
 
         &::before {
             content: '';

res/css/views/rooms/_EventBubbleTile.scss

@@ -0,0 +1,149 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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_EventTile[data-layout=bubble] {
+
+    --avatarSize: 32px;
+    --gutterSize: 7px;
+    --cornerRadius: 5px;
+
+    --maxWidth: 70%;
+
+    position: relative;
+    margin-top: var(--gutterSize);
+    margin-left: var(--avatarSize);
+    margin-right: var(--avatarSize);
+    padding: 2px 0;
+
+    &:hover {
+        background: rgb(242, 242, 242);
+    }
+
+    .mx_SenderProfile,
+    .mx_EventTile_line {
+        width: fit-content;
+        max-width: 70%;
+        background: var(--backgroundColor);
+    }
+
+    .mx_SenderProfile {
+        display: none;
+        padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
+    }
+
+    .mx_EventTile_line {
+        padding: var(--gutterSize);
+        border-radius: var(--cornerRadius);
+    }
+
+    /*
+    .mx_SenderProfile + .mx_EventTile_line {
+        padding-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    */
+
+    .mx_EventTile_avatar {
+        position: absolute;
+        top: 0;
+        img {
+            border: 2px solid #fff;
+            border-radius: 50%;
+        }
+    }
+
+    &[data-self=true] {
+        .mx_EventTile_line {
+            float: right;
+        }
+        .mx_ReactionsRow {
+            float: right;
+            clear: right;
+            display: flex;
+
+            /* Moving the "add reaction button" before the reactions */
+            > :last-child {
+                order: -1;
+            }
+        }
+        .mx_EventTile_avatar {
+            right: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F8FDFC;
+    }
+
+    &:not([data-self=true]) {
+        .mx_EventTile_avatar {
+            left: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F7F8F9;
+    }
+
+    &.mx_EventTile_bubbleContainer,
+    &.mx_EventTile_info,
+    & ~ .mx_EventListSummary[data-expanded=false] {
+
+        --backgroundColor: transparent;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mx_EventTile_avatar {
+            position: static;
+            order: -1;
+        }
+    }
+
+    & ~ .mx_EventListSummary {
+        --maxWidth: 95%;
+        .mx_EventListSummary_toggle {
+            float: none;
+            margin: 0;
+            order: 9;
+        }
+    }
+
+    & + .mx_EventListSummary {
+        .mx_EventTile {
+            margin-top: 0;
+            padding: 0;
+        }
+    }
+
+    .mx_EventListSummary_toggle {
+        margin-right: 55px;
+    }
+
+    .mx_EventTile_line {
+        display: flex;
+        gap: var(--gutterSize);
+        > a {
+            order: 999; /* always display the timestamp as the last item */
+            align-self: flex-end;
+        }
+    }
+
+    .mx_EventTile_readAvatars {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+
+}

res/css/views/rooms/_EventTile.scss

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,44 +18,43 @@ limitations under the License.
 $left-gutter: 64px;
 $hover-select-border: 4px;
 
-.mx_EventTile {
+.mx_EventTile:not([data-layout=bubble]) {
     max-width: 100%;
     clear: both;
     padding-top: 18px;
     font-size: $font-14px;
     position: relative;
-}
 
-.mx_EventTile.mx_EventTile_info {
+    .mx_EventTile.mx_EventTile_info {
         padding-top: 1px;
-}
+    }
 
-.mx_EventTile_avatar {
+    .mx_EventTile_avatar {
         top: 14px;
         left: 8px;
         cursor: pointer;
         user-select: none;
-}
+    }
 
-.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
         top: $font-6px;
         left: $left-gutter;
-}
+    }
 
-.mx_EventTile_continuation {
+    .mx_EventTile_continuation {
         padding-top: 0px !important;
 
         &.mx_EventTile_isEditing {
             padding-top: 5px !important;
             margin-top: -5px;
         }
-}
+    }
 
-.mx_EventTile_isEditing {
+    .mx_EventTile_isEditing {
         background-color: $header-panel-bg-color;
-}
+    }
 
-.mx_EventTile .mx_SenderProfile {
+    .mx_EventTile .mx_SenderProfile {
         color: $primary-fg-color;
         font-size: $font-14px;
         display: inline-block; /* anti-zalgo, with overflow hidden */
@@ -68,9 +67,9 @@ $hover-select-border: 4px;
         white-space: nowrap;
         text-overflow: ellipsis;
         max-width: calc(100% - $left-gutter);
-}
+    }
 
-.mx_EventTile .mx_SenderProfile .mx_Flair {
+    .mx_EventTile .mx_SenderProfile .mx_Flair {
         opacity: 0.7;
         margin-left: 5px;
         display: inline-block;
@@ -83,124 +82,102 @@ $hover-select-border: 4px;
             margin-right: 2px;
             border-radius: 8px;
         }
-}
+    }
 
-.mx_EventTile_isEditing .mx_MessageTimestamp {
+    .mx_EventTile_isEditing .mx_MessageTimestamp {
         visibility: hidden;
-}
+    }
 
-.mx_EventTile .mx_MessageTimestamp {
+    .mx_EventTile .mx_MessageTimestamp {
         display: block;
         white-space: nowrap;
         left: 0px;
         text-align: center;
         user-select: none;
-}
+    }
 
-.mx_EventTile_continuation .mx_EventTile_line {
+    .mx_EventTile_continuation .mx_EventTile_line {
         clear: both;
-}
+    }
 
-.mx_EventTile_line, .mx_EventTile_reply {
+    .mx_EventTile_line, .mx_EventTile_reply {
         position: relative;
         padding-left: $left-gutter;
         border-radius: 8px;
-}
+    }
 
-.mx_RoomView_timeline_rr_enabled,
+    .mx_RoomView_timeline_rr_enabled,
-// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
+    // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
-.mx_EventListSummary {
+    .mx_EventListSummary {
         .mx_EventTile_line {
             /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
             margin-right: 110px;
         }
-}
-
-.mx_EventTile_bubbleContainer {
-    display: grid;
-    grid-template-columns: 1fr 100px;
-
-    .mx_EventTile_line {
-        margin-right: 0;
-        grid-column: 1 / 3;
-        // override default padding of mx_EventTile_line so that we can be centered
-        padding: 0 !important;
     }
 
-    .mx_EventTile_msgOption {
+    .mx_EventTile_reply {
-        grid-column: 2;
-    }
-}
-
-.mx_EventTile_reply {
         margin-right: 10px;
-}
+    }
 
-/* HACK to override line-height which is already marked important elsewhere */
+    .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px !important;
-    line-height: 57px !important;
-}
-
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
         left: calc(-$hover-select-border);
-}
+    }
 
-.mx_EventTile:hover .mx_MessageActionBar,
+    .mx_EventTile:hover .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+    .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
+    [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
-.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
+    .mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
         visibility: visible;
-}
+    }
 
-/* this is used for the tile for the event which is selected via the URL.
+    /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
-.mx_EventTile_selected > .mx_EventTile_line {
+    .mx_EventTile_selected > .mx_EventTile_line {
         border-left: $accent-color 4px solid;
         padding-left: calc($left-gutter - $hover-select-border);
         background-color: $event-selected-color;
-}
+    }
 
-.mx_EventTile_highlight,
+    .mx_EventTile_highlight,
-.mx_EventTile_highlight .markdown-body {
+    .mx_EventTile_highlight .markdown-body {
         color: $event-highlight-fg-color;
 
         .mx_EventTile_line {
             background-color: $event-highlight-bg-color;
         }
-}
+    }
 
-.mx_EventTile_info .mx_EventTile_line {
+    .mx_EventTile_info .mx_EventTile_line {
         padding-left: calc($left-gutter + 18px);
-}
+    }
 
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+    .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
         padding-left: calc($left-gutter + 18px - $hover-select-border);
-}
+    }
 
-.mx_EventTile:hover .mx_EventTile_line,
+    .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
+    .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
+    .mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
         background-color: $event-selected-color;
-}
+    }
 
-.mx_EventTile_searchHighlight {
+    .mx_EventTile_searchHighlight {
         background-color: $accent-color;
         color: $accent-fg-color;
         border-radius: 5px;
         padding-left: 2px;
         padding-right: 2px;
         cursor: pointer;
-}
+    }
 
-.mx_EventTile_searchHighlight a {
+    .mx_EventTile_searchHighlight a {
         background-color: $accent-color;
         color: $accent-fg-color;
-}
+    }
 
-.mx_EventTile_receiptSent,
+    .mx_EventTile_receiptSent,
-.mx_EventTile_receiptSending {
+    .mx_EventTile_receiptSending {
         // We don't use `position: relative` on the element because then it won't line
         // up with the other read receipts
 
@@ -217,19 +194,19 @@ $hover-select-border: 4px;
             left: 0;
             right: 0;
         }
-}
+    }
-.mx_EventTile_receiptSent::before {
+    .mx_EventTile_receiptSent::before {
         mask-image: url('$(res)/img/element-icons/circle-sent.svg');
-}
+    }
-.mx_EventTile_receiptSending::before {
+    .mx_EventTile_receiptSending::before {
         mask-image: url('$(res)/img/element-icons/circle-sending.svg');
-}
+    }
 
-.mx_EventTile_contextual {
+    .mx_EventTile_contextual {
         opacity: 0.4;
-}
+    }
 
-.mx_EventTile_msgOption {
+    .mx_EventTile_msgOption {
         float: right;
         text-align: right;
         position: relative;
@@ -241,80 +218,50 @@ $hover-select-border: 4px;
         height: 1px;
 
         margin-right: 10px;
-}
+    }
 
-.mx_EventTile_msgOption a {
+    .mx_EventTile_msgOption a {
         text-decoration: none;
-}
+    }
 
-.mx_EventTile_readAvatars {
+    /* all the overflow-y: hidden; are to trap Zalgos -
-    position: relative;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    // This aligns the avatar with the last line of the
-    // message. We want to move it one line up - 2.2rem
-    top: -2.2rem;
-    user-select: none;
-    z-index: 1;
-}
-
-.mx_EventTile_readAvatars .mx_BaseAvatar {
-    position: absolute;
-    display: inline-block;
-    height: $font-14px;
-    width: $font-14px;
-
-    will-change: left, top;
-    transition:
-        left var(--transition-short) ease-out,
-        top var(--transition-standard) ease-out;
-}
-
-.mx_EventTile_readAvatarRemainder {
-    color: $event-timestamp-color;
-    font-size: $font-11px;
-    position: absolute;
-}
-
-/* all the overflow-y: hidden; are to trap Zalgos -
        but they introduce an implicit overflow-x: auto.
        so make that explicitly hidden too to avoid random
        horizontal scrollbars occasionally appearing, like in
        https://github.com/vector-im/vector-web/issues/1154
         */
-.mx_EventTile_content {
+    .mx_EventTile_content {
         display: block;
         overflow-y: hidden;
         overflow-x: hidden;
         margin-right: 34px;
-}
+    }
 
-/* De-zalgoing */
+    /* De-zalgoing */
-.mx_EventTile_body {
+    .mx_EventTile_body {
         overflow-y: hidden;
-}
+    }
 
-/* Spoiler stuff */
+    /* Spoiler stuff */
-.mx_EventTile_spoiler {
+    .mx_EventTile_spoiler {
         cursor: pointer;
-}
+    }
 
-.mx_EventTile_spoiler_reason {
+    .mx_EventTile_spoiler_reason {
         color: $event-timestamp-color;
         font-size: $font-11px;
-}
+    }
 
-.mx_EventTile_spoiler_content {
+    .mx_EventTile_spoiler_content {
         filter: blur(5px) saturate(0.1) sepia(1);
         transition-duration: 0.5s;
-}
+    }
 
-.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+    .mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
         filter: none;
-}
+    }
 
-.mx_EventTile_e2eIcon {
+    .mx_EventTile_e2eIcon {
         position: absolute;
         top: 6px;
         left: 44px;
@@ -347,110 +294,159 @@ $hover-select-border: 4px;
             mask-position: center;
             mask-size: 90%;
         }
-}
+    }
 
-.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
+    .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
         &::after {
             mask-image: url('$(res)/img/e2e/warning.svg');
             background-color: $notice-primary-color;
         }
         opacity: 1;
-}
+    }
 
-.mx_EventTile_e2eIcon_unknown {
+    .mx_EventTile_e2eIcon_unknown {
         &::after {
             mask-image: url('$(res)/img/e2e/warning.svg');
             background-color: $notice-primary-color;
         }
         opacity: 1;
-}
+    }
 
-.mx_EventTile_e2eIcon_unencrypted {
+    .mx_EventTile_e2eIcon_unencrypted {
         &::after {
             mask-image: url('$(res)/img/e2e/warning.svg');
             background-color: $notice-primary-color;
         }
         opacity: 1;
-}
+    }
 
-.mx_EventTile_e2eIcon_unauthenticated {
+    .mx_EventTile_e2eIcon_unauthenticated {
         &::after {
             mask-image: url('$(res)/img/e2e/normal.svg');
             background-color: $composer-e2e-icon-color;
         }
         opacity: 1;
-}
+    }
 
-.mx_EventTile_keyRequestInfo {
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
-    font-size: $font-12px;
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-}
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-
-.mx_EventTile_keyRequestInfo_text {
-    opacity: 0.5;
-}
-
-.mx_EventTile_keyRequestInfo_text a {
-    color: $primary-fg-color;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
-    text-align: auto;
-    margin-left: 3px;
-    margin-right: 3px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
-    margin-top: 0px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
-    margin-bottom: 0px;
-}
-
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
         padding-left: calc($left-gutter - $hover-select-border);
-}
+    }
 
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
         border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
-}
+    }
 
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
         border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
-}
+    }
 
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
         border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
-}
+    }
 
-.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
-.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
+    .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
         padding-left: calc($left-gutter + 18px - $hover-select-border);
-}
+    }
 
-/* End to end encryption stuff */
+    /* End to end encryption stuff */
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
+    .mx_EventTile:hover .mx_EventTile_e2eIcon {
         opacity: 1;
-}
+    }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
         left: calc(-$hover-select-border);
-}
+    }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
         display: block;
         left: 41px;
+    }
+
+    .mx_EventTile_tileError {
+        color: red;
+        text-align: center;
+
+        // Remove some of the default tile padding so that the error is centered
+        margin-right: 0;
+        .mx_EventTile_line {
+            padding-left: 0;
+            margin-right: 0;
+        }
+
+        .mx_EventTile_line span {
+            padding: 4px 8px;
+        }
+
+        a {
+            margin-left: 1em;
+        }
+    }
+
+    .mx_MImageBody {
+        margin-right: 34px;
+    }
+}
+
+.mx_EventTile_bubbleContainer {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+
+    .mx_EventTile_line {
+        margin-right: 0;
+        grid-column: 1 / 3;
+        // override default padding of mx_EventTile_line so that we can be centered
+        padding: 0 !important;
+    }
+
+    .mx_EventTile_msgOption {
+        grid-column: 2;
+    }
+}
+
+.mx_EventTile_readAvatars {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    // This aligns the avatar with the last line of the
+    // message. We want to move it one line up - 2.2rem
+    top: -2.2rem;
+    user-select: none;
+    z-index: 1;
+}
+
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+    position: absolute;
+    display: inline-block;
+    height: $font-14px;
+    width: $font-14px;
+
+    will-change: left, top;
+    transition:
+        left var(--transition-short) ease-out,
+        top var(--transition-standard) ease-out;
+}
+
+.mx_EventTile_readAvatarRemainder {
+    color: $event-timestamp-color;
+    font-size: $font-11px;
+    position: absolute;
+}
+
+/* HACK to override line-height which is already marked important elsewhere */
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+    font-size: 48px !important;
+    line-height: 57px !important;
 }
 
 .mx_EventTile_content .mx_EventTile_edited {
@@ -601,24 +597,33 @@ $hover-select-border: 4px;
 
 /* end of overrides */
 
-.mx_EventTile_tileError {
-    color: red;
-    text-align: center;
 
-    // Remove some of the default tile padding so that the error is centered
+.mx_EventTile_keyRequestInfo {
-    margin-right: 0;
+    font-size: $font-12px;
-    .mx_EventTile_line {
+}
-        padding-left: 0;
-        margin-right: 0;
-    }
 
-    .mx_EventTile_line span {
+.mx_EventTile_keyRequestInfo_text {
-        padding: 4px 8px;
+    opacity: 0.5;
-    }
+}
 
-    a {
+.mx_EventTile_keyRequestInfo_text a {
-        margin-left: 1em;
+    color: $primary-fg-color;
-    }
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+    text-align: auto;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+    margin-top: 0px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+    margin-bottom: 0px;
 }
 
 @media only screen and (max-width: 480px) {

src/components/views/elements/EventListSummary.tsx

@@ -63,7 +63,7 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true}>
                 { children }
             </li>
         );
@@ -92,7 +92,7 @@ const EventListSummary: React.FC<IProps> = ({
     }
 
     return (
-        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""}>
             <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
@@ -101,4 +101,8 @@ const EventListSummary: React.FC<IProps> = ({
     );
 };
 
+EventListSummary.defaultProps = {
+    startExpanded: false,
+};
+
 export default EventListSummary;

src/components/views/messages/UnknownBody.js

@@ -17,11 +17,12 @@ limitations under the License.
 
 import React, {forwardRef} from "react";
 
-export default forwardRef(({mxEvent}, ref) => {
+export default forwardRef(({mxEvent, children}, ref) => {
     const text = mxEvent.getContent().body;
     return (
         <span className="mx_UnknownBody" ref={ref}>
             { text }
+            { children }
         </span>
     );
 });

src/components/views/rooms/EventTile.tsx

@@ -29,7 +29,7 @@ import { hasText } from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
-import {Layout} from "../../../settings/Layout";
+import { Layout } from "../../../settings/Layout";
 import {formatTime} from "../../../DateUtils";
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
@@ -988,8 +988,13 @@ export default class EventTile extends React.Component<IProps, IState> {
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const showTimestamp = this.props.mxEvent.getTs() &&
+        const showTimestamp = this.props.mxEvent.getTs()
-            (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
+            && (this.props.alwaysShowTimestamps
+            || this.props.last
+            || this.state.hover
+            || this.state.actionBarFocused)
+            || this.props.layout === Layout.Bubble;
+
         const timestamp = showTimestamp ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
@@ -1168,6 +1173,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                     this.props.alwaysShowTimestamps || this.state.hover,
                 );
 
+                const isOwnEvent = this.props.mxEvent.sender.userId === MatrixClientPeg.get().getUserId();
+
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
                     React.createElement(this.props.as || "li", {
@@ -1177,6 +1184,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                         "aria-live": ariaLive,
                         "aria-atomic": "true",
                         "data-scroll-tokens": scrollToken,
+                        "data-layout": this.props.layout,
+                        "data-self": isOwnEvent,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, [
@@ -1198,9 +1207,9 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 onHeightChanged={this.props.onHeightChanged}
                             />
                             { keyRequestInfo }
-                            { reactionsRow }
                             { actionBar }
                         </div>,
+                        reactionsRow,
                         msgOption,
                         avatar,