From eab7704b987e7a76528a55defc301661ea0440d3 Mon Sep 17 00:00:00 2001
From: hayyaksi <193020925+hayaksi1@users.noreply.github.com>
Date: Wed, 5 Aug 2026 17:50:25 +0300
Subject: [PATCH] Keep emoji at code size inside code blocks so line numbers
 stay aligned (#34497)

---
 .../playwright/e2e/timeline/timeline.spec.ts  | 24 +++++++++++++++++++
 apps/web/res/css/views/rooms/_EventTile.pcss  |  6 +++++
 2 files changed, 30 insertions(+)

diff --git a/apps/web/playwright/e2e/timeline/timeline.spec.ts b/apps/web/playwright/e2e/timeline/timeline.spec.ts
index 42cf5adf98..9ea0532a44 100644
--- a/apps/web/playwright/e2e/timeline/timeline.spec.ts
+++ b/apps/web/playwright/e2e/timeline/timeline.spec.ts
@@ -909,6 +909,30 @@ test.describe("Timeline", () => {
             });
         });
 
+        test("should not enlarge emoji inside a code block", async ({ page, app, room }) => {
+            await page.goto(`/#/room/${room.roomId}`);
+
+            const composer = app.getComposerField();
+            await composer.fill("```\nconst waving = '👋';\n```");
+            await composer.press("Enter");
+            await composer.fill("👋 hello");
+            await composer.press("Enter");
+
+            const codeBlock = page.locator(".mx_EventTile_pre_container").first();
+            await expect(codeBlock).toBeVisible();
+
+            const fontSize = (locator: Locator): Promise<string> =>
+                locator.evaluate((node) => window.getComputedStyle(node).fontSize);
+
+            // Inside a code block the emoji must not be any larger than the code around it,
+            // otherwise the line it sits on grows and the line numbers stop lining up
+            expect(await fontSize(codeBlock.locator(".mx_Emoji"))).toEqual(await fontSize(codeBlock.locator("code")));
+
+            // ...but emoji in an ordinary message are still enlarged
+            const message = page.locator(".mx_EventTile_last .mx_EventTile_body");
+            expect(await fontSize(message.locator(".mx_Emoji"))).not.toEqual(await fontSize(message));
+        });
+
         test(
             "should be able to hide an image",
             { tag: "@screenshot" },
diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss
index 009750653a..fe274ec2f5 100644
--- a/apps/web/res/css/views/rooms/_EventTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventTile.pcss
@@ -851,6 +851,12 @@ $left-gutter: 64px;
         /* For correct positioning of _copyButton (See TextualBody) */
         position: relative;
 
+        /* Emoji are enlarged in prose, but a code block's line numbers are one fixed-height block
+           per line and cannot follow a line that an enlarged emoji has made taller. */
+        .mx_Emoji {
+            font-size: inherit;
+        }
+
         &:focus-within,
         &:hover {
             .mx_EventTile_button {