Skip to content

fix(preview): increase whitespace padding to 200 chars for Gmail#3100

Open
mvanhorn wants to merge 4 commits intoresend:canaryfrom
mvanhorn:osc/2268-preview-whitespace-200
Open

fix(preview): increase whitespace padding to 200 chars for Gmail#3100
mvanhorn wants to merge 4 commits intoresend:canaryfrom
mvanhorn:osc/2268-preview-whitespace-200

Conversation

@mvanhorn
Copy link
Contributor

@mvanhorn mvanhorn commented Mar 21, 2026

Summary

Increases PREVIEW_MAX_LENGTH from 150 to 200 in the <Preview> component. Gmail shows up to 200 characters of preview text, so the previous 150-character limit left a gap where body content could bleed through into the email preview snippet.

Changes

  • packages/preview/src/preview.tsx: Changed PREVIEW_MAX_LENGTH constant from 150 to 200
  • packages/preview/src/preview.spec.tsx: Updated inline snapshots and assertions to match the new limit

The renderWhiteSpace() function and substring() truncation both reference this constant, so all behavior updates automatically.

Testing

  • All 5 existing tests pass after snapshot update
  • Verified the whitespace padding div now contains 200 repetitions for short text
  • Long text (>200 chars) still truncates correctly with no whitespace padding

Fixes #2268

This contribution was developed with AI assistance (Claude Code).


Summary by cubic

Pads email preview text to 200 chars to match Gmail and prevent body content from bleeding into snippets. Updates PREVIEW_MAX_LENGTH in packages/preview, refreshes snapshots in packages/preview, packages/preview-server, packages/react-email, and adds a changeset for @react-email/preview; long text still truncates.

Written for commit 5783822. Summary will update on new commits.

Gmail shows up to 200 characters of preview text, but the Preview
component only padded to 150 characters. This left a 50-character gap
where body content could bleed into the preview snippet.

Fixes resend#2268

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Contributor

vercel bot commented Mar 21, 2026

@mvanhorn is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

@changeset-bot
Copy link

changeset-bot bot commented Mar 21, 2026

🦋 Changeset detected

Latest commit: 5783822

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@react-email/preview Patch
@react-email/components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 2 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 21, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/preview@3100
npm i https://pkg.pr.new/@react-email/preview-server@3100
npm i https://pkg.pr.new/react-email@3100

commit: f1f6f04

mvanhorn and others added 3 commits March 21, 2026 11:24
The CLI's email export test also has an inline snapshot that references
the Preview component output. Updated to match the new 200-char limit.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

<Preview> only fills whitespace to 150 chars while Gmail shows up to 200 chars.

1 participant