fix(react-email): mobile's sidebar broken in preview server (#2279)

gabrielmfern · web-flow · commit 1340a0a805ef · 2025-06-03T11:26:30.000-03:00
diff --git a/.changeset/famous-pants-cross.md b/.changeset/famous-pants-cross.md
@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+fix mobile's sidebar broken in the preview server
diff --git a/packages/react-email/src/app/layout.tsx b/packages/react-email/src/app/layout.tsx
@@ -27,8 +27,8 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       className={`${inter.variable} ${sfMono.variable} font-sans`}
       lang="en"
     >
-      <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
-        <div className="bg-gradient-to-t from-slate-3 flex">
+      <body className="relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+        <div className="bg-gradient-to-t from-slate-3 flex flex-col">
           <EmailsProvider
             initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
           >
diff --git a/packages/react-email/src/components/shell.tsx b/packages/react-email/src/components/shell.tsx
@@ -81,7 +81,10 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
             'inline-block relative overflow-hidden will-change-[width]',
             'w-full h-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
-            sidebarToggled && 'lg:w-[calc(100%-16rem)]',
+            {
+              'lg:w-[calc(100%-16rem)]': sidebarToggled,
+              'opacity-0 lg:opacity-100': !sidebarToggled,
+            },
           )}
         >
           {children}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-email": patch
 +---
++
 +fix mobile's sidebar broken in the preview server
Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,8 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {`
`27`	`27`	className={`${inter.variable} ${sfMono.variable} font-sans`}
`28`	`28`	`lang="en"`
`29`	`29`	`>`
`30`		`- <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">`
`31`		`- <div className="bg-gradient-to-t from-slate-3 flex">`
	`30`	`+ <body className="relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">`
	`31`	`+ <div className="bg-gradient-to-t from-slate-3 flex flex-col">`
`32`	`32`	`<EmailsProvider`
`33`	`33`	`initialEmailsDirectoryMetadata={emailsDirectoryMetadata}`
`34`	`34`	`>`