Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inconsistent <Body> padding #1796

Open
jasongerbes opened this issue Dec 1, 2024 · 5 comments · May be fixed by #1911
Open

Inconsistent <Body> padding #1796

jasongerbes opened this issue Dec 1, 2024 · 5 comments · May be fixed by #1911
Labels
Package: @react-email/body Type: Bug Confirmed bug

Comments

@jasongerbes
Copy link

Describe the Bug

The <Body> component doesn’t explicitly set padding, meaning that its value is inconsistent between the dev preview and mail clients.

Which package is affected (leave empty if unsure)

@react-email/body

Link to the code that reproduces this issue

https://demo.react.email/preview/magic-links/slack-confirm?view=desktop&lang=markup

To Reproduce

Create an email with the <Body> component - do not explicitly set padding.

Compare the preview output to Mail on iOS 18.

Expected Behavior

The <Body> component should explicitly set the default padding (presumably to 0).

What's your node version? (if relevant)

No response
@jasongerbes jasongerbes added the Type: Bug Confirmed bug label Dec 1, 2024
@MarkBuster
Copy link

I am Mark Buster and Part of Team Green. Team Green is a group of students attending North Seattle College and We are working on/claiming this issue.

@A-Fujihara
Copy link

A-Fujihara commented Feb 7, 2025 •
edited
Loading

We've tested this issue by sending emails to both Gmail and iOS Mail clients, and we're noticing some inconsistencies with padding, particularly around social media icons. However, we were hoping to clarify the following:

  1. Could you specify which elements within the <Body> component are showing inconsistent padding in your tests? In our testing, we mainly see discrepancies around social media icons, but this seems to be a localized issue rather than a <Body>-wide padding problem.

  2. Are you seeing padding inconsistencies across the entire email content, or are there specific sections where this is more noticeable?

-Team Green NSC

@jasongerbes
Copy link
Author

I was referring to the <Body> component itself, as the padding is not set by React Email by default. My assumption is that it should be reset to 0 to override any mail client-specific styling (e.g. default padding in iOS Mail).

It's possible that other React Email components have the same issue, but I haven't tested them.

MarkBuster pushed a commit to MarkBuster/react-email that referenced this issue Feb 16, 2025
inconsistent body padding fix, issue resend#1796
e409e03
@gabrielmfern gabrielmfern linked a pull request Feb 17, 2025 that will close this issue
Draft
@gabrielmfern
Copy link
Collaborator

gabrielmfern commented Feb 17, 2025 •
edited
Loading

@jasongerbes Can you share some screenshots for how exactly it ends up being different from preview to email client?

Looking at it myself, I couldn't see much of a difference on the demo email you linked to.

@A-Fujihara A-Fujihara mentioned this issue Feb 25, 2025
Open
@A-Fujihara

This comment has been minimized.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: @react-email/body Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(body): inconsistent body padding MarkBuster/react-email
4 participants
@jasongerbes @gabrielmfern @A-Fujihara @MarkBuster