fix: add jumbo emoji header spacing

[Just-Insane]

Description

Add a small top margin to jumbo emoji message bodies so oversized emoji do not touch the sender header above them. Also add a smoke fixture plus a Playwright assertion that measures the header-to-emoji gap.

Fixes #331

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

AI disclosure:

• Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
• Fully AI generated (explain what all the generated code does in moderate detail).
  This patch adds a small marginTop to the jumbo emoji variants in the message text layout so the first oversized emoji line has breathing room from the sender metadata above it. It also extends the smoke page with a header-plus-jumbo-emoji fixture and updates the emoji polish Playwright smoke test to assert that the jumbo line stays separated from the header and still fits within its own line box.

[github-actions]

Sentry Preview Error Triage

No Sentry errors found for this PR's preview deployment as of Tue, 23 Jun 2026 17:08:40 GMT.

This comment updates automatically after each push.

[github-code-quality]

Code Coverage Overview

Languages: JavaScript

JavaScript / code-coverage/vitest

The overall coverage in the codex/bug-issue-331-... branch remains at 27%, unchanged from the integration branch.

Show a code coverage summary of the most impacted files.

File	integration 6291268	codex/bug-issue-331-... f9aa079	+/-
src/app/feature...gSendDisplay.ts	100%	0%	-100%
src/app/hooks/i...yboardHeight.ts	8%	4%	-4%
src/app/feature...age/Message.tsx	3%	3%	0%

---

_{Updated June 23, 2026 17:11 UTC
Code Coverage is in Public Preview. Learn more and provide us with your feedback.}

[github-actions]

Deploying with    Cloudflare Workers

Status	Preview URL	Commit	Alias	Updated (UTC)
✅ Deployment successful!	https://pr-340-charm.justin-tech.workers.dev	722e123	pr-340	Tue, 23 Jun 2026 17:10:48 GMT

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f9aa079f9b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use the vanilla-extract variable directly

createVar values are already emitted as var(--...) references in this file (for example SpacingVar is used directly), so wrapping it again produces margin-top: var(var(--...), 0), which browsers ignore as invalid CSS. In every headerSpacing + jumbo emoji case the added top margin is therefore dropped and the header-overlap fix does not actually apply; use a defaulted variable or fallbackVar instead.

Useful? React with 👍 / 👎.