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.

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

Container does not center content in some clients #1042

Open
ganondev opened this issue Nov 20, 2023 · 2 comments · May be fixed by #1223
Open

Container does not center content in some clients #1042

ganondev opened this issue Nov 20, 2023 · 2 comments · May be fixed by #1223
Labels
Package: @react-email/container Type: Documentation Improvements or additions to documentation

Comments

@ganondev
Copy link

ganondev commented Nov 20, 2023

Describe the Bug

Mostly just raising this issue to bring visibility to #1035 as it's quite small and has been open for a bit.

According to Container:

Container

A layout component that centers all the email content.

However a quick demo of this using the preview app in chrome proves this isn't the case, at least not always. Content will align to the left by default. I was able to fix this using the adjustments in the above PR.

Which package is affected (leave empty if unsure)

@react-email/container

To Reproduce

Put any content in a <Container/> and preview it in the dev server.

Expected Behavior

Content should be centered.

What's your node version? (if relevant)

18.17.1

@ganondev ganondev added the Type: Bug Confirmed bug label Nov 20, 2023
@ganondev ganondev changed the title Container does not center content in most clients Container does not center content in some clients Nov 20, 2023
@gabrielmfern
Copy link
Collaborator

Container does what it is supposed to do, it is basically like what Tailwind's container class does.

This should bring a documentation fix not a change to the component as this could even be a breaking change for those who are using the component.

gabrielmfern added a commit that referenced this issue Jan 22, 2024
@gabrielmfern gabrielmfern linked a pull request Jan 22, 2024 that will close this issue
gabrielmfern added a commit that referenced this issue Jan 23, 2024
gabrielmfern added a commit that referenced this issue Jan 29, 2024
@zirho
Copy link

zirho commented Feb 23, 2024

<Container>
  <div className="text-center">
    <Button
      href="https://hello.com"
      style={{ background: '#000', color: '#fff', padding: '12px 20px' }}
    >
      Hello
    </Button>
  </div>
</Container>

this centers it with tailwind

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: @react-email/container Type: Documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants