Don't show a message bubble around polls (#7374)

* Don't show a message bubble around polls

* Update res/css/views/rooms/_EventBubbleTile.scss

res/css/views/rooms/_EventBubbleTile.scss

@@ -312,6 +312,10 @@ limitations under the License.
     }
 }
 
+.mx_EventTile.mx_EventTile_noBubble[data-layout=bubble] {
+    --backgroundColor: transparent;
+}
+
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
 .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
 .mx_EventTile.mx_EventTile_info[data-layout=bubble],

src/components/views/rooms/EventTile.tsx

@@ -1067,6 +1067,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             isBubbleMessage,
             isInfoMessage,
             isLeftAlignedBubbleMessage,
+            noBubbleEvent,
         } = getEventDisplayInfo(this.props.mxEvent);
         const { isQuoteExpanded } = this.state;
 
@@ -1121,6 +1122,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_noSender: this.props.hideSender,
             mx_EventTile_clamp: this.props.tileShape === TileShape.ThreadPanel,
+            mx_EventTile_noBubble: noBubbleEvent,
         });
 
         // If the tile is in the Sending state, don't speak the message.

src/utils/EventUtils.ts

@@ -119,6 +119,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
     tileHandler: string;
     isBubbleMessage: boolean;
     isLeftAlignedBubbleMessage: boolean;
+    noBubbleEvent: boolean;
 } {
     const content = mxEvent.getContent();
     const msgtype = content.msgtype;
@@ -144,7 +145,11 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         eventType !== EventType.RoomMessage &&
         eventType !== EventType.Sticker &&
         eventType !== EventType.RoomCreate &&
-        eventType !== POLL_START_EVENT_TYPE.name
+        !POLL_START_EVENT_TYPE.matches(eventType)
+    );
+    // Some non-info messages want to be rendered in the appropriate bubble column but without the bubble background
+    const noBubbleEvent = (
+        POLL_START_EVENT_TYPE.matches(eventType)
     );
 
     // If we're showing hidden events in the timeline, we should use the
@@ -158,7 +163,7 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): {
         isInfoMessage = true;
     }
 
-    return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage };
+    return { tileHandler, isInfoMessage, isBubbleMessage, isLeftAlignedBubbleMessage, noBubbleEvent };
 }
 
 export function isVoiceMessage(mxEvent: MatrixEvent): boolean {