Skip to content

fix(web): copy-paste component compatibility issues #2681

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

Merged
merged 20 commits into from
Nov 13, 2025
Merged

fix(web): copy-paste component compatibility issues #2681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cbf4b50
define width for react email logo
gabrielmfern Nov 5, 2025
bf89770
add width to logo
gabrielmfern Nov 5, 2025
723f26a
add width for buttons
gabrielmfern Nov 5, 2025
eeeb465
add sizes to images
gabrielmfern Nov 5, 2025
b972885
add missing images to components's static
gabrielmfern Nov 5, 2025
c80b1a9
use row and column instead of flex
gabrielmfern Nov 5, 2025
716741e
fix article with single author's compatibility
gabrielmfern Nov 5, 2025
8aa195d
WIP: fix compatibility issues in article with multiple authors
gabrielmfern Nov 5, 2025
8e0d1bb
fix compat issues in article with multiple authors
gabrielmfern Nov 7, 2025
baba91b
Merge branch 'canary' into fix/copy-paste-component-compat-issues
gabrielmfern Nov 7, 2025
a6e724e
header-and-numbered-list-items improvements
gabrielmfern Nov 7, 2025
50c4c32
lint
gabrielmfern Nov 7, 2025
f00ba60
fix rating survey compat issues
gabrielmfern Nov 7, 2025
1948449
wip: customer reviews
gabrielmfern Nov 11, 2025
64eca20
Merge branch 'canary' into fix/copy-paste-component-compat-issues
gabrielmfern Nov 12, 2025
9cf112f
fix compatibility of customer reviews
gabrielmfern Nov 12, 2025
c5a965b
update inline styles variant
gabrielmfern Nov 12, 2025
5cfe829
lint
gabrielmfern Nov 12, 2025
087861e
fix typo
gabrielmfern Nov 12, 2025
e48daa0
make dd and dt siblings, kind of
gabrielmfern Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 57 additions & 53 deletions apps/web/components/article-with-multiple-authors/inline-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
Column,
Heading,
Hr,
Img,
Expand All @@ -7,10 +8,11 @@ import {
Section,
Text,
} from '@react-email/components';
import { Fragment } from 'react/jsx-runtime';
import { Layout } from '../_components/layout';

export const component = (
<Row>
<Section>
<Hr
style={{
borderColor: 'rgb(209,213,219) !important',
Expand All @@ -32,19 +34,20 @@ export const component = (
imgSrc: '/static/steve-wozniak.jpg',
showDivider: false,
},
].map((author, index) => (
<>
<Section
].map((author) => (
<Fragment key={author.name}>
<Row
align="left"
key={index}
style={{ marginTop: '16px', maxWidth: '288px' }}
width="288"
style={{ marginTop: '16px', width: '288px' }}
>
<Section
<Column
width="48"
height="48"
style={{
display: 'inline-block',
marginTop: '5px',
maxHeight: '48px',
maxWidth: '48px',
paddingTop: '5px',
height: '48px',
width: '48px',
textAlign: 'left',
}}
>
Expand All @@ -60,12 +63,12 @@ export const component = (
}}
width={48}
/>
</Section>
<Section
</Column>
<Column
width="100%"
style={{
display: 'inline-block',
marginLeft: '18px',
maxWidth: '120px',
paddingLeft: '18px',
width: '100%',
textAlign: 'left',
verticalAlign: 'top',
}}
Expand Down Expand Up @@ -93,41 +96,42 @@ export const component = (
>
{author.title}
</Text>
<Section style={{ marginTop: '4px' }}>
<Link
href="#"
style={{
display: 'inline-flex',
height: '12px',
width: '12px',
}}
>
<Img
alt="X"
height={12}
src="/static/x-icon.png"
width={12}
/>
</Link>
<Link
href="#"
style={{
display: 'inline-flex',
height: '12px',
marginLeft: '8px',
width: '12px',
}}
>
<Img
alt="LinkedIn"
height={12}
src="/static/in-icon.png"
width={12}
/>
</Link>
</Section>
</Section>
</Section>
<Row width={undefined} style={{ paddingTop: '8px' }} align="left">
<Column width="12" height="12">
<Link
href="#"
style={{
height: '12px',
width: '12px',
}}
>
<Img
alt="X"
height={12}
src="/static/x-icon.png"
width={12}
/>
</Link>
</Column>
<Column width="12" height="12" style={{ paddingLeft: 8 }}>
<Link
href="#"
style={{
height: '12px',
width: '12px',
}}
>
<Img
alt="LinkedIn"
height={12}
src="/static/in-icon.png"
width={12}
/>
</Link>
</Column>
</Row>
</Column>
</Row>
{author.showDivider ? (
<Hr
style={{
Expand All @@ -141,10 +145,10 @@ export const component = (
}}
/>
) : null}
</>
</Fragment>
))}
</Section>
</Row>
</Section>
);

export default () => {
Expand Down
123 changes: 67 additions & 56 deletions apps/web/components/article-with-multiple-authors/tailwind.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
Column,
Heading,
Hr,
Img,
Expand All @@ -7,80 +8,90 @@ import {
Section,
Text,
} from '@react-email/components';
import { Fragment } from 'react/jsx-runtime';
import { Layout } from '../_components/layout';

export const component = (
<Row>
<Section>
<Hr className="!border-gray-300 mt-[16px] mb-[0px]" />
<Section>
{[
{
name: 'Steve Jobs',
title: 'Co-Founder & CEO',
imgSrc: '/static/steve-jobs.jpg',
showDivider: true,
},
{
name: 'Steve Wozniak',
title: 'Co-Founder & CTO',
imgSrc: '/static/steve-wozniak.jpg',
showDivider: false,
},
].map((author, index) => (
<>
<Section align="left" className="mt-[16px] max-w-[288px]" key={index}>
<Section className="mt-[5px] inline-block max-h-[48px] max-w-[48px] text-left">
<Img
alt={author.name}
className="block rounded-full object-cover object-center"
height={48}
src={author.imgSrc}
width={48}
/>
</Section>
<Section className="ml-[18px] inline-block max-w-[120px] text-left align-top">
<Heading
as="h3"
className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
>
{author.name}
</Heading>
<Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
{author.title}
</Text>
<Section className="mt-[4px]">
<Link className="inline-flex h-[12px] w-[12px]" href="#">
{[
{
name: 'Steve Jobs',
title: 'Co-Founder & CEO',
imgSrc: '/static/steve-jobs.jpg',
showDivider: true,
},
{
name: 'Steve Wozniak',
title: 'Co-Founder & CTO',
imgSrc: '/static/steve-wozniak.jpg',
showDivider: false,
},
].map((author) => (
<Fragment key={author.name}>
<Row align="left" width="288" className="pt-[16px] w-[288px]">
<Column
width="48"
height="48"
align="left"
className="pt-[5px] h-[48px] w-[48px]"
>
<Img
alt={author.name}
className="block rounded-full object-cover object-center"
height={48}
src={author.imgSrc}
width={48}
/>
</Column>
<Column
width="100%"
className="pl-[18px] w-full"
align="left"
valign="top"
>
<Heading
as="h3"
className="m-0 font-medium text-[14px] text-gray-900 leading-[20px]"
>
{author.name}
</Heading>
<Text className="m-0 font-medium text-[12px] text-gray-500 leading-[14px]">
{author.title}
</Text>
<Row width={undefined} className="pt-[8px]" align="left">
<Column width="12" height="12">
<Link className="h-[12px] w-[12px]" href="#">
<Img
alt="X"
height={12}
src="/static/x-icon.png"
width={12}
/>
</Link>
<Link
className="ml-[8px] inline-flex h-[12px] w-[12px]"
href="#"
>
</Column>
<Column className="pl-[8px]" width="12" height="12">
<Link className="h-[12px] w-[12px]" href="#">
<Img
alt="LinkedIn"
height={12}
src="/static/in-icon.png"
width={12}
/>
</Link>
</Section>
</Section>
</Section>
{author.showDivider ? (
<Hr
className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
style={{ float: 'left' }}
/>
) : null}
</>
))}
</Section>
</Row>
</Column>
</Row>
</Column>
</Row>
{author.showDivider ? (
<Hr
className="mr-[16px] inline-block h-[58px] w-[1px] bg-gray-300 [border:none]"
style={{ float: 'left' }}
/>
) : null}
</Fragment>
))}
</Section>
);

export default () => {
Expand Down
Loading