Merge branch 'develop' into gsouquet/fix-18099

res/css/views/rooms/_EventTile.scss

@@ -217,25 +217,6 @@ $hover-select-border: 4px;
         overflow-y: hidden;
     }
 
-    /* Spoiler stuff */
-    .mx_EventTile_spoiler {
-        cursor: pointer;
-    }
-
-    .mx_EventTile_spoiler_reason {
-        color: $event-timestamp-color;
-        font-size: $font-11px;
-    }
-
-    .mx_EventTile_spoiler_content {
-        filter: blur(5px) saturate(0.1) sepia(1);
-        transition-duration: 0.5s;
-    }
-
-    .mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
-        filter: none;
-    }
-
     &:hover.mx_EventTile_verified .mx_EventTile_line,
     &:hover.mx_EventTile_unverified .mx_EventTile_line,
     &:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -309,6 +290,25 @@ $hover-select-border: 4px;
     margin-right: 34px;
 }
 
+/* Spoiler stuff */
+.mx_EventTile_spoiler {
+    cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+    color: $event-timestamp-color;
+    font-size: $font-11px;
+}
+
+.mx_EventTile_spoiler_content {
+    filter: blur(5px) saturate(0.1) sepia(1);
+    transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+    filter: none;
+}
+
 .mx_RoomView_timeline_rr_enabled {
 
     .mx_EventTile:not([data-layout=bubble]) {

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -45,6 +45,11 @@ limitations under the License.
     border-radius: 10px;
     padding: 0 16px 9px 16px;
     pointer-events: none;
+    display: flow-root;
+
+    .mx_EventTile[data-layout=bubble] {
+        margin-top: 30px;
+    }
 
     .mx_EventTile_msgOption {
         display: none;

src/HtmlUtils.tsx

@@ -79,8 +79,8 @@ function mightContainEmoji(str: string): boolean {
  * @return {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char: string): string {
-    const shortcodes = getEmojiFromUnicode(char).shortcodes;
+    const shortcodes = getEmojiFromUnicode(char)?.shortcodes;
-    return shortcodes.length > 0 ? `:${shortcodes[0]}:` : '';
+    return shortcodes?.length ? `:${shortcodes[0]}:` : '';
 }
 
 export function processHtmlForSending(html: string): string {

src/components/structures/MessagePanel.tsx

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