From 781fd640036a70570cff0a4994b66b313caf441c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Jan 2022 11:11:40 +0000
Subject: [PATCH 1/4] Fix issue with tile error boundaries collapsing in
 bubbles layout

---
 res/css/views/rooms/_EventBubbleTile.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 6b0f11ea231..42f4e948d3a 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;

From 04887080d818b62dc710f02ca6dfe80a49a8040c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Jan 2022 11:11:50 +0000
Subject: [PATCH 2/4] Use a more semantic tag for the tile error boundary

---
 src/components/views/messages/TileErrorBoundary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/TileErrorBoundary.tsx b/src/components/views/messages/TileErrorBoundary.tsx
index 16b32f5f06b..ef0c7d544b7 100644
--- a/src/components/views/messages/TileErrorBoundary.tsx
+++ b/src/components/views/messages/TileErrorBoundary.tsx
@@ -88,7 +88,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
                 </AccessibleButton>;
             }
 
-            return (<div className={classNames(classes)}>
+            return (<li className={classNames(classes)}>
                 <div className="mx_EventTile_line">
                     <span>
                         { _t("Can't load this message") }
@@ -97,7 +97,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
                         { viewSourceButton }
                     </span>
                 </div>
-            </div>);
+            </li>);
         }
 
         return this.props.children;

From 318250b3f34c3e6618b254be58522c5e6be0f6de Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Jan 2022 11:15:41 +0000
Subject: [PATCH 3/4] Apply layout to TileErrorBoundary

---
 src/components/structures/MessagePanel.tsx          | 2 +-
 src/components/views/messages/TileErrorBoundary.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

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 ef0c7d544b7..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 (<li 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") }

From 7663c62bab1c27d3f82ba9dec1259eb9a2261df2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Jan 2022 11:18:15 +0000
Subject: [PATCH 4/4] Fix alignment in bubble layout of tile error boundary

---
 res/css/views/rooms/_EventBubbleTile.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 42f4e948d3a..0bb779c4d1f 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -587,3 +587,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
+    flex-direction: column; // restore the centering
+}