Fix formatting of rich text emotes (#12862)

and add them to the new test suite

Fixes https://github.com/element-hq/element-web/issues/27896

playwright/e2e/messages/messages.spec.ts

@@ -69,6 +69,13 @@ test.describe("Message rendering", () => {
                 await expect(msgTile).toMatchScreenshot(`emote-ltr-${direction}displayname.png`);
             });
 
+            test("should render an LTR rich text emote", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "/me lays a *free range* egg");
+                await expect(msgTile).toMatchScreenshot(`emote-rich-ltr-${direction}displayname.png`);
+            });
+
             test("should render an edited LTR message", async ({ page, user, app, room }) => {
                 await page.goto(`#/room/${room.roomId}`);
 
@@ -97,6 +104,13 @@ test.describe("Message rendering", () => {
                 await expect(msgTile).toMatchScreenshot(`emote-rtl-${direction}displayname.png`);
             });
 
+            test("should render a richtext RTL emote", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "/me أضع بيضة *حرة النطاق*");
+                await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`);
+            });
+
             test("should render an edited RTL message", async ({ page, user, app, room }) => {
                 await page.goto(`#/room/${room.roomId}`);
 

res/css/views/rooms/_EventTile.pcss

@@ -787,6 +787,17 @@ $left-gutter: 64px;
         ul {
             list-style-type: disc;
         }
+
+        /* override styles from the base markdown CSS that put markdown content on its own line,
+           as this isn't what we want for richtext emote content.
+         */
+        &::before {
+            display: none;
+        }
+
+        &::after {
+            display: none;
+        }
     }
 }