Skip to content

padding doesn't work in table for Klavyio #2256

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

Open
bernaferrari opened this issue May 20, 2025 · 0 comments · May be fixed by #2257
Open

padding doesn't work in table for Klavyio #2256

bernaferrari opened this issue May 20, 2025 · 0 comments · May be fixed by #2257
Labels
Type: Bug Confirmed bug

Comments

@bernaferrari
Copy link

bernaferrari commented May 20, 2025

Describe the Bug

Something as simple as:

      <Container
        style={{
          paddingLeft: 16,
          paddingRight: 16,
        }}
      >

won't work in Klavyio (after export) because it generates

    <table>
        <tbody>
          <tr style={{ width: '100%' }}>
            <td>{children}</td>
          </tr>
        </tbody>
      </table>

table can't have padding (in Klavyio), but td can!

So ideally, to fix this, you could destructure Container (and other components) into something like:

import * as React from "react";

export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<"table">>;

export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
  (
    {
      children,
      style = {},
      ...props
    },
    ref
  ) => {
    const {
      padding,
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft,
      ...restStyle
    } = style;

    const tdStyle = {
      padding,
      paddingTop,
      paddingRight,
      paddingBottom,
      paddingLeft,
    };

    return (
      <table
        align="center"
        width="100%"
        {...props}
        border={0}
        cellPadding="0"
        cellSpacing="0"
        ref={ref}
        role="presentation"
        style={{ maxWidth: "37.5em", ...restStyle }}
      >
        <tbody>
          <tr style={{ width: "100%" }}>
            <td style={tdStyle}>{children}</td>
          </tr>
        </tbody>
      </table>
    );
  }
);

Container.displayName = "Container";

The reason according to gemini is old outlook, but Klavyio doesn't render in their preview neither on sent email (even on modern clients):
Image

If you agree it is a problem, I can send a PR to all components that use padding so they use in td instead of table. This would make my life much easier (otherwise I'll need to fork resend and modify locally).

Which package is affected (leave empty if unsure)

@react-email/container

@bernaferrari bernaferrari added the Type: Bug Confirmed bug label May 20, 2025
@bernaferrari bernaferrari changed the title Padding doesn't work in Klavyio padding doesn't work in table for Klavyio May 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Confirmed bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant