Fix issue with tile error boundaries collapsing in bubbles layout (#7653)

Author: t3chguy

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
+}

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)}

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;