diff --git a/src/features/messages/Messages.module.css b/src/features/messages/Messages.module.css
index 18d2baa58..afc059287 100644
--- a/src/features/messages/Messages.module.css
+++ b/src/features/messages/Messages.module.css
@@ -198,11 +198,11 @@
 }
 .reactionNativeEmoji {
   display: inline-block;
-  min-width: 12px;
+  min-width: 18px;
   max-width: 96px;
-  height: 12px;
-  font-size: var(--text-caption);
-  line-height: 1;
+  height: 18px;
+  font-size: var(--text-body-sm);
+  line-height: 18px;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/tests/browser/reactions-polish.spec.mjs b/tests/browser/reactions-polish.spec.mjs
index 8790e7b4b..262fd4662 100644
--- a/tests/browser/reactions-polish.spec.mjs
+++ b/tests/browser/reactions-polish.spec.mjs
@@ -27,7 +27,7 @@ test("reaction pills wrap, preview, toggle, and add from the inline control", as
   const native = row.locator('button[data-reaction="👍"]');
   await expect(custom.locator("img")).toHaveCSS("object-fit", "contain");
   await expect(custom.locator("img")).toHaveCSS("width", "14px");
-  await expect(native.locator("span").first()).toHaveCSS("font-size", "12px");
+  await expect(native.locator("span").first()).toHaveCSS("font-size", "14px");
   await expect(custom).toHaveCSS("height", "28px");
   const plus = row.getByRole("button", { name: "Add reaction" });
   await expect(plus).toHaveCSS("width", "28px");
diff --git a/tests/browser/reactions.spec.mjs b/tests/browser/reactions.spec.mjs
index c69b13083..f254812f2 100644
--- a/tests/browser/reactions.spec.mjs
+++ b/tests/browser/reactions.spec.mjs
@@ -4,6 +4,37 @@ import { createServer } from "./vite-server.mjs";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath } from "node:url";
 
+test("native reaction emoji fit inside compact pills", async ({ page }) => {
+  const server = await createServer({
+    root: fileURLToPath(new URL("../../", import.meta.url)),
+    configFile: false,
+    envFile: false,
+    plugins: [react()],
+    logLevel: "error",
+    server: { host: "127.0.0.1", port: 0 },
+  });
+  try {
+    await server.listen();
+    await page.goto(
+      `http://127.0.0.1:${server.httpServer.address().port}/tests/fixtures/emoji.html?reactions&wrap`,
+    );
+    for (const emoji of ["👍", "🙌"]) {
+      const pill = page.locator(`button[data-reaction="${emoji}"]`);
+      const glyph = pill.locator("span").first();
+      await expect(pill).toHaveCSS("height", "28px");
+      await expect(glyph).toHaveCSS("min-width", "18px");
+      await expect(glyph).toHaveCSS("height", "18px");
+      await expect(glyph).toHaveCSS("font-size", "14px");
+      await expect(glyph).toHaveCSS("line-height", "18px");
+    }
+    await page.locator('button[data-reaction="👍"]').screenshot({
+      path: test.info().outputPath("native-reaction-emoji.png"),
+    });
+  } finally {
+    await server.close();
+  }
+});
+
 test("reaction plus opens a visible emoji-only picker, restores focus and publishes custom emoji", async ({
   page,
 }) => {