Fix call tiles on the bubble layout

res/css/views/rooms/_EventBubbleTile.scss

@@ -264,6 +264,7 @@ limitations under the License.
 }
 
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
 .mx_EventTile.mx_EventTile_info[data-layout=bubble],
 .mx_EventListSummary[data-layout=bubble][data-expanded=false] {
     --backgroundColor: transparent;

src/components/views/rooms/EventTile.tsx

@@ -857,7 +857,12 @@ export default class EventTile extends React.Component<IProps, IState> {
     render() {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType() as EventType;
-        const { tileHandler, isBubbleMessage, isInfoMessage } = getEventDisplayInfo(this.props.mxEvent);
+        const {
+            tileHandler,
+            isBubbleMessage,
+            isInfoMessage,
+            isLeftAlignedBubbleMessage,
+        } = getEventDisplayInfo(this.props.mxEvent);
 
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
@@ -879,6 +884,7 @@ export default class EventTile extends React.Component<IProps, IState> {
         const isEditing = !!this.props.editState;
         const classes = classNames({
             mx_EventTile_bubbleContainer: isBubbleMessage,
+            mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
             mx_EventTile: true,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,

src/utils/EventUtils.ts

@@ -103,6 +103,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
     isInfoMessage: boolean;
     tileHandler: string;
     isBubbleMessage: boolean;
+    isLeftAlignedBubbleMessage: boolean;
 } {
     const content = mxEvent.getContent();
     const msgtype = content.msgtype;
@@ -118,12 +119,16 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         (eventType === EventType.RoomEncryption) ||
         (tileHandler === "messages.MJitsiWidgetEvent")
     );
+    const isLeftAlignedBubbleMessage = (
+        !isBubbleMessage &&
+        eventType === EventType.CallInvite
+    );
     let isInfoMessage = (
         !isBubbleMessage &&
+        !isLeftAlignedBubbleMessage &&
         eventType !== EventType.RoomMessage &&
         eventType !== EventType.Sticker &&
-        eventType !== EventType.RoomCreate &&
-        eventType !== EventType.CallInvite
+        eventType !== EventType.RoomCreate
     );
 
     // If we're showing hidden events in the timeline, we should use the
@@ -137,5 +142,5 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         isInfoMessage = true;
     }
 
-    return { tileHandler, isInfoMessage, isBubbleMessage };
+    return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage };
 }