fix(email): improve mobile email rendering — scale wide HTML, tighten spacing

[evanhutnik]

Summary

• Scale wide HTML emails on mobile: Emails with HTML content wider than the viewport now scale down to fit using CSS zoom. Prevents horizontal overflow/clipping of rich HTML emails
• Tighten subject-to-message spacing: Reduced the gap between the email subject line and the first message on both desktop and mobile.
• Smaller mobile subject font: Reduced the mobile subject heading from text-3xl to text-2xl for better proportions on small screens.
• Hide subject from mobile top bar: The email subject no longer populates the top navigation bar on mobile, since it's already shown inline.
• Collapse header icon: Replaced the X icon in the expanded message header with a caret-up icon, matching the caret-down used to expand.
• Tighten 'to' spacing in message header: Reduced padding around the 'to' text between sender and recipients.

Before:

After:

[coderabbitai]

Walkthrough

This pull request updates visual layout and styling across several email components: Email (reduces the h1 bottom padding from pb-4 to pb-2), EmailMessageBody (removes the default messageDiv.style.overflow = 'auto' and adds a Solid createEffect that, when expanded, waits for layout via requestAnimationFrame, compares container.clientWidth to message.scrollWidth, clears prior inline styles, and either applies messageDiv.style.zoom to fit or sets messageDiv.style.overflow = 'auto'), MessageList (reduces top padding from pt-3 to pt-2 and adjusts mobile title wrapper/heading padding and font size), EmailMessageTopBar (replaces the X icon with CaretUp and slightly adjusts the "to" label padding), and TopBar (imports isMobile and conditionally sets StaticSplitLabel’s label to '' when isMobile()).

Poem

🐰 A nibble on pixels, soft and bright,
h1 snugged in with a gentle sigh,
I watch the body shrink to fit the light,
carets lift where crosses used to lie,
tidy threads of mail hop by.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main changes: scaling wide HTML emails on mobile and tightening spacing throughout the email UI components.
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing specific improvements to mobile email rendering with before/after screenshots.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch evan/email-mobile-style

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@js/app/packages/block-email/component/EmailMessageBody.tsx`:
- Around line 224-250: The single measurement in requestAnimationFrame is
insufficient; update the code so applyScale() is re-run whenever layout or
content changes by attaching a ResizeObserver to the container (call applyScale
on resize), re-running applyScale on window resize as a fallback, and also
observe image load and DOM changes (e.g., MutationObserver on
container.shadowRoot or add load listeners to any <img> elements found) so that
when images finish loading or nodes change applyScale() is invoked; reference
the existing applyScale, container, and messageDiv to locate where to wire these
observers and remember to disconnect them on cleanup.
- Around line 219-243: The early return when !props.isBodyExpanded() leaves any
previously applied inline zoom/overflow on the host's content; update the
collapse path to clear those styles: when props.isBodyExpanded() is false,
obtain the same container via host(), access container.shadowRoot and query the
same messageDiv (as in applyScale), and reset messageDiv.style.zoom = '' and
messageDiv.style.overflow = '' before returning; alternatively move the current
reset logic (messageDiv.style.zoom/overflow = '') into a shared cleanup that
runs both on expand (before scaling) and on collapse so applyScale and the
collapse branch use the same clearing code.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ae8a1016-67a8-4257-97d1-6055fe79446f

📥 Commits

Reviewing files that changed from the base of the PR and between cc8467c and 2c9e461.

📒 Files selected for processing (3)

• js/app/packages/block-email/component/Email.tsx
• js/app/packages/block-email/component/EmailMessageBody.tsx
• js/app/packages/block-email/component/MessageList.tsx

[github-actions]

Preview: https://evan-email-mobile-style-wvxqsm.preview.macro.com/app (b5d9587)