diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss index 5bea427961..63d1bdaee2 100644 --- a/apps/web/res/css/views/rooms/_EventTile.pcss +++ b/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); diff --git a/apps/web/src/components/views/messages/TextualBody.tsx b/apps/web/src/components/views/messages/TextualBody.tsx index 7fadf33510..caf5df344d 100644 --- a/apps/web/src/components/views/messages/TextualBody.tsx +++ b/apps/web/src/components/views/messages/TextualBody.tsx @@ -301,6 +301,9 @@ class InnerTextualBody extends React.Component { 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 { if (this.props.replacingEventId) { body = ( -
+
{body} {this.renderEditedMarker()}
@@ -323,7 +326,7 @@ class InnerTextualBody extends React.Component { } if (this.props.isSeeingThroughMessageHiddenForModeration) { body = ( -
+
{body} {this.renderPendingModerationMarker()}
diff --git a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx index 8351394533..0fd8c7106b 100644 --- a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx +++ b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx @@ -146,6 +146,28 @@ describe("", () => { 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);