Skip to content

fix(email): drop leftover-canvas CSS zoom - #6374

Open
cameronapak wants to merge 2 commits into
mainfrom
fix/email-html-drop-leftover-zoom
Open

cameronapak wants to merge 2 commits into
mainfrom
fix/email-html-drop-leftover-zoom

Conversation

@cameronapak

@cameronapak cameronapak commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Why

PR #5926 could not run Macro's credentialed pipelines because its head branch lived on a personal fork. It also stacked on #5890, which has since merged.

The remaining behavior change is still useful: leftover CSS zoom shrinks wide designed email and its text. Constrained content should wrap, while genuinely wide layouts should remain at native size and scroll horizontally.

What changed

  • Removes the renderer's leftover fit-to-width zoom and its obsolete helper.
  • Keeps image, signature, quote, and code containment intact.
  • Constrains the app host to the email pane so wide layouts scroll inside the message.
  • Updates the wide-table fixtures, Linux snapshots, regression coverage, and supporting research.

This replaces #5926 with a macro-inc/macro head branch and applies the intended change to the current email-renderer architecture.

Validation

  • just check
  • Email renderer Node suite: 60 tests passed
  • Email renderer behavioral Chromium suite: 16 tests passed
  • Wide-table Linux snapshots: light and dark at 360px and 800px
  • Narrow-pane regression: prose, <pre>, signatures, and quotes stay within 240px at native zoom: 1
  • GitHub review fixture at 360px: native zoom: 1, wrapped <pre>, and no horizontal overflow
  • Focused app regression test: 3 tests passed
  • Email renderer type-check and lint

@coderabbitai

coderabbitai Bot commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 420f09c9-569b-4b23-ada4-6b0349f9dd96

📥 Commits

Reviewing files that changed from the base of the PR and between f1bee02 and e6adda7.

⛔ Files ignored due to path filters (4)
  • packages/email-renderer/tests/snapshots/wide-table-dark-360.png is excluded by !**/*.png
  • packages/email-renderer/tests/snapshots/wide-table-dark-800.png is excluded by !**/*.png
  • packages/email-renderer/tests/snapshots/wide-table-light-360.png is excluded by !**/*.png
  • packages/email-renderer/tests/snapshots/wide-table-light-800.png is excluded by !**/*.png
📒 Files selected for processing (11)
  • apps/web/docs/email-client-zoom.md
  • apps/web/src/features/email-message/primitives/email-message-body.test.ts
  • apps/web/src/features/email-message/primitives/email-message-body.ts
  • apps/web/src/features/email-message/views/email-message-body.tsx
  • packages/email-renderer/README.md
  • packages/email-renderer/src/browser/email-body-containment-css.ts
  • packages/email-renderer/src/browser/renderer.ts
  • packages/email-renderer/src/core/fit-to-width-zoom.test.ts
  • packages/email-renderer/src/core/fit-to-width-zoom.ts
  • packages/email-renderer/tests/fixtures/wide-table.json
  • packages/email-renderer/tests/rendering.pw.ts
💤 Files with no reviewable changes (2)
  • packages/email-renderer/src/core/fit-to-width-zoom.test.ts
  • packages/email-renderer/src/core/fit-to-width-zoom.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Summary

Summary by CodeRabbit

  • Improvements

    • Wide HTML emails now retain native text size and scroll horizontally when content exceeds the message pane.
    • Email containers use the available pane width, while readable text and quoted content continue to wrap appropriately.
    • Horizontal scrolling adjusts as the message pane is resized and is removed when content fits.
  • Documentation

    • Added guidance on how email clients handle wide HTML messages and documented the updated rendering behavior.
  • Tests

    • Expanded coverage for wrapping, sizing, overflow, and resizing behavior.

Walkthrough

The email renderer no longer applies fit-to-width zoom. It keeps content at native size and enables horizontal scrolling for wide expanded content. Email body hosts now use zero minimum width and full width. Browser tests and fixture descriptions reflect native-size scrolling. Documentation records email client fitting mechanisms and Zero's wrap-or-scroll behavior.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to e6add

The email pane retains native-size wide content with horizontal scrolling, while narrow content remains constrained to the pane. No unresolved merge-blocking risk is identified.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title uses the conventional commits format, is 41 characters long, and accurately describes the removal of leftover CSS zoom behavior.
Description check ✅ Passed The description clearly explains the motivation, implementation changes, expected behavior, and validation results. It is directly related to the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Sep 14, 2026

Copy link
Copy Markdown

@cameronapak
cameronapak marked this pull request as ready for review September 14, 2026 13:45
@cameronapak

Copy link
Copy Markdown
Contributor Author

Hey @peterchinman, this PR comes from when you mentioned the idea of completely removing the email contents odd CSS zoom approach entirely.

I wanted to ask if you'd be willing to take this PR the rest of the way to merge. It feels like it's done and ready for merge, but I want to make sure that it meets your quality checks and for your eyes just in case I may be missing something

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant