From 074fec359b9f34947a70e710d3431d79135aad37 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Jan 2022 13:34:26 +0000
Subject: [PATCH] Fix issue with tile error boundaries collapsing in bubbles
 layout (#7653)

---
 res/css/views/rooms/_EventBubbleTile.scss           | 5 +++++
 src/components/structures/MessagePanel.tsx          | 2 +-
 src/components/views/messages/TileErrorBoundary.tsx | 6 ++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 6b0f11ea231..0bb779c4d1f 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -36,6 +36,7 @@ limitations under the License.
     margin-top: var(--gutterSize);
     margin-left: 49px;
     font-size: $font-14px;
+    flex-shrink: 0;
 
     .mx_ThreadInfo {
         clear: both;
@@ -586,3 +587,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
+    flex-direction: column; // restore the centering
+}
diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index 5c3696ffb1b..fb559e5ff26 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -772,7 +772,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         const callEventGrouper = this.props.callEventGroupers.get(mxEv.getContent().call_id);
         // use txnId as key if available so that we don't remount during sending
         ret.push(
-            <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
+            <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv} layout={this.props.layout}>
                 <EventTile
                     as="li"
                     ref={this.collectEventTile.bind(this, eventId)}
diff --git a/src/components/views/messages/TileErrorBoundary.tsx b/src/components/views/messages/TileErrorBoundary.tsx
index 16b32f5f06b..9f3b751dd35 100644
--- a/src/components/views/messages/TileErrorBoundary.tsx
+++ b/src/components/views/messages/TileErrorBoundary.tsx
@@ -26,9 +26,11 @@ import BugReportDialog from '../dialogs/BugReportDialog';
 import AccessibleButton from '../elements/AccessibleButton';
 import SettingsStore from "../../../settings/SettingsStore";
 import ViewSource from "../../structures/ViewSource";
+import { Layout } from '../../../settings/enums/Layout';
 
 interface IProps {
     mxEvent: MatrixEvent;
+    layout: Layout;
 }
 
 interface IState {
@@ -88,7 +90,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
                 </AccessibleButton>;
             }
 
-            return (<div className={classNames(classes)}>
+            return (<li className={classNames(classes)} data-layout={this.props.layout}>
                 <div className="mx_EventTile_line">
                     <span>
                         { _t("Can't load this message") }
@@ -97,7 +99,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
                         { viewSourceButton }
                     </span>
                 </div>
-            </div>);
+            </li>);
         }
 
         return this.props.children;