Call Tile - Improve tile alignment in modern and bubble layout (#33478)

* Tile must have same indent as messages

* Align the call tiles between the bubbles

apps/web/src/components/views/rooms/EventTile.tsx

@@ -1071,6 +1071,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             isLeftAlignedBubbleMessage,
             noBubbleEvent,
             isSeeingThroughMessageHiddenForModeration,
+            isAlignedBetweenBubbles,
         } = getEventDisplayInfo(
             MatrixClientPeg.safeGet(),
             this.props.mxEvent,
@@ -1118,6 +1119,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             getEventTileClassState({
                 isBubbleMessage,
                 isLeftAlignedBubbleMessage,
+                isAlignedBetweenBubbles,
                 isEditing,
                 isInfoMessage,
                 isTwelveHour: this.props.isTwelveHour,

apps/web/src/components/views/rooms/EventTile/eventTileDerivedState.ts

@@ -402,6 +402,8 @@ export interface EventTileClassState {
     isBubbleMessage: boolean;
     /** Whether the bubble tile is left-aligned. */
     isLeftAlignedBubbleMessage: boolean;
+    /** Whether the event is aligned between the bubbles */
+    isAlignedBetweenBubbles: boolean;
     /** Whether the event is currently being edited. */
     isEditing: boolean;
     /** Whether the event renders as an informational timeline item. */
@@ -444,6 +446,7 @@ export interface EventTileClassState {
 export function getEventTileClassState({
     isBubbleMessage,
     isLeftAlignedBubbleMessage,
+    isAlignedBetweenBubbles,
     isEditing,
     isInfoMessage,
     isTwelveHour,
@@ -466,6 +469,7 @@ export function getEventTileClassState({
     return {
         mx_EventTile_bubbleContainer: isBubbleMessage,
         mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
+        mx_EventTile_alignedBetweenBubbles: isAlignedBetweenBubbles,
         mx_EventTile: true,
         mx_EventTile_isEditing: isEditing,
         mx_EventTile_info: isInfoMessage,