Fix issues with /me emote two liner (#33081)

* Fix issues with me emote liner

* Fix Prettier

apps/web/res/css/views/rooms/_EventTile.pcss

@@ -1378,6 +1378,10 @@ $left-gutter: 64px;
     display: flex;
 }
 
+.mx_EventTile_annotatedInline {
+    display: inline-flex;
+}
+
 .mx_EventTile_footer {
     display: flex;
     gap: var(--cpd-space-2x);

apps/web/src/components/views/messages/TextualBody.tsx

@@ -301,6 +301,9 @@ class InnerTextualBody extends React.Component<Props> {
         const isCaption = [MsgType.Image, MsgType.File, MsgType.Audio, MsgType.Video].includes(
             content.msgtype as MsgType,
         );
+        const annotatedClassName = isEmote
+            ? "mx_EventTile_annotated mx_EventTile_annotatedInline"
+            : "mx_EventTile_annotated";
 
         const willHaveWrapper =
             this.props.replacingEventId || this.props.isSeeingThroughMessageHiddenForModeration || isEmote;
@@ -315,7 +318,7 @@ class InnerTextualBody extends React.Component<Props> {
 
         if (this.props.replacingEventId) {
             body = (
-                <div dir="auto" className="mx_EventTile_annotated">
+                <div dir="auto" className={annotatedClassName}>
                     {body}
                     {this.renderEditedMarker()}
                 </div>
@@ -323,7 +326,7 @@ class InnerTextualBody extends React.Component<Props> {
         }
         if (this.props.isSeeingThroughMessageHiddenForModeration) {
             body = (
-                <div dir="auto" className="mx_EventTile_annotated">
+                <div dir="auto" className={annotatedClassName}>
                     {body}
                     {this.renderPendingModerationMarker()}
                 </div>

apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx

@@ -146,6 +146,28 @@ describe("<TextualBody />", () => {
         expect(content).toMatchSnapshot();
     });
 
+    it("keeps edited emote bodies inline with the sender", () => {
+        DMRoomMap.makeShared(defaultMatrixClient);
+
+        const ev = mkEvent({
+            type: "m.room.message",
+            room: room1Id,
+            user: "sender",
+            content: {
+                body: "winks",
+                msgtype: "m.emote",
+            },
+            event: true,
+        });
+        jest.spyOn(ev, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+
+        const { container } = getComponent({ mxEvent: ev, replacingEventId: ev.getId() });
+
+        const annotated = container.querySelector(".mx_MEmoteBody > .mx_EventTile_annotatedInline");
+        expect(annotated).not.toBeNull();
+        expect(annotated?.tagName).toBe("DIV");
+    });
+
     it("renders m.notice correctly", () => {
         DMRoomMap.makeShared(defaultMatrixClient);