<Preview> results in poor results in Gmail #1942

ui-mattlucas · 2025-03-03T21:14:29Z

Describe the Bug

I'm using the Preview tag in the prescribed way:

import {
  Head,
  Html,
  Body,
  Container,
  Tailwind,
  Preview,
} from "@react-email/components";
import { ReactNode } from "react";

interface LayoutProps {
  children?: ReactNode;
}

import { headContent } from "./context";
import Footer from "../Footer";

export default function Layout({ children }: LayoutProps) {
  return (
    <Html style={{ backgroundColor: "black" }}>
      <Tailwind>
        <Head>{headContent()}</Head>
        <Body
          style={{ margin: 0, padding: 0 }}
          className="font-lato bg-black text-white min-w-full"
        >
          <Preview>*|MC_PREVIEW_TEXT|*</Preview>
          <Container className="m-auto">
            {children}
            <Footer />
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

When I send out the resulting html, there is a gap between the subject line and the preview text.

Additionally, the email content will run up against the Preview text on the other side resulting in a somewhat mangled marketing experience.

This could perhaps be a change to Gmail because I didn't see it before, but it certainly will affect a lot of users on both sides.

Through experimentation, I believe that a better experience may be acquired by jettisoning the

tags in the Preview component and instead rendering a table with the Preview string like this:

```
<Body>
      <table
        role="presentation"
        width="100%"
        cellPadding="0"
        cellSpacing="0"
        style={{
          display: "none",
          height: 0,
          maxHeight: "0px",
          overflow: "hidden",
        }}
      >
        <tr>
          <td
            style={{
              fontSize: "1px",
              lineHeight: "1px",
              color: "#000000",
              opacity: "0",
            }}
          >
            {/* BUG: Whitespace is needed so Gmail doesn't include other email text after preview */}
            *|MC_PREVIEW_TEXT|*
            <span
              dangerouslySetInnerHTML={{
                __html: "&zwnj;&nbsp;".repeat(100),
              }}
            />
          </td>
        </tr>
      </table>
      <Container className="m-auto">



### Which package is affected (leave empty if unsure)

@react-email/preview

### Link to the code that reproduces this issue

https://codepen.io/Matt-Lucas-the-solid/pen/OPJpQGx

### To Reproduce

With the Preview tags:
<img width="1333" alt="Image" src="https://github.com/user-attachments/assets/a3109d23-943d-4bc1-b3dc-6ac6f2abae3a" />



### Expected Behavior

With the Table:
<img width="1324" alt="Image" src="https://github.com/user-attachments/assets/1bf955d4-e85a-41b4-9a53-70343ad7ad43" />


Perhaps the Preview component should be rewritten to export a Table instead of using the divs if block elements create unnecessary empty space?

### What's your node version? (if relevant)

22.13.1

The text was updated successfully, but these errors were encountered:

ui-mattlucas added the Type: Bug Confirmed bug label Mar 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<Preview> results in poor results in Gmail #1942

<Preview> results in poor results in Gmail #1942

ui-mattlucas commented Mar 3, 2025 •

edited

Loading

<Preview> results in poor results in Gmail #1942

<Preview> results in poor results in Gmail #1942

Comments

ui-mattlucas commented Mar 3, 2025 • edited Loading

Describe the Bug

ui-mattlucas commented Mar 3, 2025 •

edited

Loading