unbubble some type of events

res/css/views/rooms/_EventBubbleTile.scss

@@ -27,7 +27,7 @@ limitations under the License.
     position: relative;
     margin-top: var(--gutterSize);
     margin-left: 50px;
-    margin-right: 50px;
+    margin-right: 100px;
 
     &.mx_EventTile_continuation {
         margin-top: 2px;
@@ -45,7 +45,7 @@ limitations under the License.
             top: -1px;
             bottom: -1px;
             left: -60px;
-            right: -65px;
+            right: -60px;
             z-index: -1;
             background: $eventbubble-bg-hover;
             border-radius: 4px;
@@ -65,7 +65,9 @@ limitations under the License.
     }
 
     .mx_SenderProfile {
-        padding: 0 var(--gutterSize);
+        position: relative;
+        top: -2px;
+        left: calc(-1 * var(--gutterSize));
     }
 
     &[data-self=false] {
@@ -73,7 +75,7 @@ limitations under the License.
             border-bottom-right-radius: var(--cornerRadius);
         }
         .mx_EventTile_avatar {
-            left: calc(-1 * var(--avatarSize));
+            left: -48px;
         }
 
         .mx_MessageActionBar {
@@ -107,7 +109,7 @@ limitations under the License.
         }
         .mx_EventTile_avatar {
             top: -19px; // height of the sender block
-            right: -45px;
+            right: -35px;
         }
 
         --backgroundColor: $eventbubble-self-bg;
@@ -120,7 +122,7 @@ limitations under the License.
         border-top-right-radius: var(--cornerRadius);
         background: var(--backgroundColor);
         display: flex;
-        gap: var(--gutterSize);
+        gap: 5px;
         margin: 0 -12px 0 -22px;
         > a {
             position: absolute;
@@ -214,6 +216,29 @@ limitations under the License.
         .mx_EventListSummary_avatars {
             padding-top: 0;
         }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        .mx_EventTile {
+            margin: 0 58px;
+        }
+    }
+
+    /* events that do not require bubble layout */
+    & ~ .mx_EventListSummary,
+    &.mx_EventTile_bad {
+        .mx_EventTile_line {
+            background: transparent;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
     }
 
     & + .mx_EventListSummary {
@@ -229,13 +254,30 @@ limitations under the License.
 
     /* Special layout scenario for "Unable To Decrypt (UTD)" events */
     &.mx_EventTile_bad > .mx_EventTile_line {
-        flex-direction: column;
+        display: grid;
+        grid-template:
+            "reply reply" auto
+            "shield body" auto
+            "shield link" auto
+            / auto  1fr;
+        .mx_EventTile_e2eIcon {
+            grid-area: shield;
+        }
+        .mx_UnknownBody {
+            grid-area: body;
+        }
+        .mx_EventTile_keyRequestInfo {
+            grid-area: link;
+        }
+        .mx_ReplyThread_wrapper {
+            grid-area: reply;
+        }
     }
 
 
     .mx_EventTile_readAvatars {
         position: absolute;
-        right: -60px;
+        right: -110px;
         bottom: 0;
         top: auto;
     }

res/css/views/rooms/_EventTile.scss

@@ -254,73 +254,6 @@ $hover-select-border: 4px;
         filter: none;
     }
 
-    .mx_EventTile_e2eIcon {
-        position: absolute;
-        top: 6px;
-        left: 44px;
-        width: 14px;
-        height: 14px;
-        display: block;
-        bottom: 0;
-        right: 0;
-        opacity: 0.2;
-        background-repeat: no-repeat;
-        background-size: contain;
-
-        &::before, &::after {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: contain;
-        }
-
-        &::before {
-            background-color: #ffffff;
-            mask-image: url('$(res)/img/e2e/normal.svg');
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: 80%;
-        }
-    }
-
-    .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 {
-        &::after {
-            mask-image: url('$(res)/img/e2e/warning.svg');
-            background-color: $notice-primary-color;
-        }
-        opacity: 1;
-    }
-
-    .mx_EventTile_e2eIcon_unencrypted {
-        &::after {
-            mask-image: url('$(res)/img/e2e/warning.svg');
-            background-color: $notice-primary-color;
-        }
-        opacity: 1;
-    }
-
-    .mx_EventTile_e2eIcon_unauthenticated {
-        &::after {
-            mask-image: url('$(res)/img/e2e/normal.svg');
-            background-color: $composer-e2e-icon-color;
-        }
-        opacity: 1;
-    }
-
     .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 {
@@ -368,6 +301,14 @@ $hover-select-border: 4px;
     .mx_MImageBody {
         margin-right: 34px;
     }
+
+    .mx_EventTile_e2eIcon {
+        position: absolute;
+        top: 6px;
+        left: 44px;
+        bottom: 0;
+        right: 0;
+    }
 }
 
 .mx_EventTile_bubbleContainer {
@@ -431,6 +372,70 @@ $hover-select-border: 4px;
     cursor: pointer;
 }
 
+
+.mx_EventTile_e2eIcon {
+    position: relative;
+    width: 14px;
+    height: 14px;
+    display: block;
+    opacity: 0.2;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    &::before, &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &::before {
+        background-color: #ffffff;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 80%;
+    }
+}
+
+.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 {
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
+    opacity: 1;
+}
+
+.mx_EventTile_e2eIcon_unencrypted {
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
+    opacity: 1;
+}
+
+.mx_EventTile_e2eIcon_unauthenticated {
+    &::after {
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        background-color: $composer-e2e-icon-color;
+    }
+    opacity: 1;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_body pre {

src/components/structures/MessagePanel.tsx

@@ -712,6 +712,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     layout={this.props.layout}
                     enableFlair={this.props.enableFlair}
                     showReadReceipts={this.props.showReadReceipts}
+                    hideSender={this.props.room.getMembers().length <= 2}
                 />
             </TileErrorBoundary>,
         );

src/components/views/rooms/EventTile.tsx

@@ -289,6 +289,9 @@ interface IProps {
 
     // whether or not to always show timestamps
     alwaysShowTimestamps?: boolean;
+
+    // whether or not to display the sender
+    hideSender?: boolean;
 }
 
 interface IState {
@@ -978,7 +981,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             );
         }
 
-        if (needsSenderProfile) {
+        if (needsSenderProfile && this.props.hideSender !== true) {
             if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                     mxEvent={this.props.mxEvent}