Skip to content

Commit 2233dc3

Browse files
committed
Stop the prose preset from styling inline emoji
The previous fix kept the emoji <img> on the same line as the surrounding text, but inside a prose container the typography preset still applied its image rules — most visibly a 2 em top/bottom margin and an enforced display — which pulled the emoji above the baseline of the run. Bios on the account list and profile page, and post bodies that carried an emoji in the middle of a sentence, all rendered with the emoji floating above the line. Tag the emoji <img> with the not-prose class and add an inline "margin: 0" so the prose preset leaves it alone. In non-prose contexts (display names in headings) the extra class has no effect, so the inline-block + vertical-align tuning from the previous commit still works there. Assisted-by: Claude Code:claude-opus-4-7
1 parent d59e725 commit 2233dc3

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

src/custom-emoji.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function renderCustomEmojis(
3535
return input.replaceAll(CUSTOM_EMOJI_REGEXP, (match) => {
3636
const emoji = emojis[match] ?? emojis[match.replace(/^:|:$/g, "")];
3737
if (emoji == null) return match;
38-
return `<img src="${emoji}" alt="${match}" style="display: inline-block; height: 1em; vertical-align: -0.125em">`;
38+
return `<img src="${emoji}" alt="${match}" class="not-prose" style="display: inline-block; height: 1em; margin: 0; vertical-align: -0.125em">`;
3939
});
4040
}
4141
}

0 commit comments

Comments
 (0)