fix: Page Jumps (#1998)

zehfernandes · zenorocha · gabrielmfern · commit f6e67c4700e7 · 2025-03-27T17:55:18.000-03:00
Co-authored-by: Zeno Rocha &lt;zno.rocha@gmail.com&gt;
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -87,6 +87,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <html
       className={`${inter.variable} ${commitMono.variable} antialiased`}
       lang="en"
+      color-scheme="dark"
     >
       <body className="overflow-x-hidden bg-black font-sans text-sm text-slate-11 h-screen-ios selection:bg-cyan-5 selection:text-cyan-12">
         <div
diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx
@@ -108,13 +108,13 @@ const Preview = ({ emailTitle }: PreviewProps) => {
       </Topbar>
 
       <ShellContent
-        className="relative flex bg-gray-200"
+        className="relative flex bg-gray-200 p-4"
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              maxWidthRef.current = elementEntry.contentRect.width - 80;
-              maxHeightRef.current = elementEntry.contentRect.height - 80;
+              maxWidthRef.current = elementEntry.contentRect.width;
+              maxHeightRef.current = elementEntry.contentRect.height;
             }
           });
 
diff --git a/packages/react-email/src/components/shell.tsx b/packages/react-email/src/components/shell.tsx
@@ -74,8 +74,7 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
         </React.Suspense>
         <main
           className={cn(
-            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0',
-            'grow',
+            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0 w-full',
             '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
           )}
         >
diff --git a/packages/react-email/src/components/toolbar.tsx b/packages/react-email/src/components/toolbar.tsx
@@ -227,11 +227,11 @@ const ToolbarInner = ({
                   Running compatibility check...
                 </div>
               ) : compatibilityCheckingResults?.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-8 px-4 my-4">
+                <div className="flex flex-col items-center justify-center pt-8">
                   <SuccessIcon />
                   <SuccessTitle>Great compatibility</SuccessTitle>
                   <SuccessDescription>
-                    It should render properly everywhere.
+                    Template should render properly everywhere.
                   </SuccessDescription>
                 </div>
               ) : (
@@ -244,7 +244,7 @@ const ToolbarInner = ({
                   Running spam check...
                 </div>
               ) : spamCheckingResult?.isSpam === false ? (
-                <div className="flex flex-col items-center justify-center py-4 px-4 my-4">
+                <div className="flex flex-col items-center justify-center pt-8">
                   <SuccessIcon />
                   <SuccessTitle>10/10</SuccessTitle>
                   <SuccessDescription>
@@ -282,7 +282,7 @@ const SuccessTitle = ({ children }) => {
 
 const SuccessDescription = ({ children }) => {
   return (
-    <p className="text-slate-11 text-sm text-center max-w-[300px]">
+    <p className="text-slate-11 text-sm text-center max-w-[320px]">
       {children}
     </p>
   );

Original file line number	Diff line number	Diff line change
`@@ -87,6 +87,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {`
`87`	`87`	`<html`
`88`	`88`	className={`${inter.variable} ${commitMono.variable} antialiased`}
`89`	`89`	`lang="en"`
	`90`	`+ color-scheme="dark"`
`90`	`91`	`>`
`91`	`92`	`<body className="overflow-x-hidden bg-black font-sans text-sm text-slate-11 h-screen-ios selection:bg-cyan-5 selection:text-cyan-12">`
`92`	`93`	`<div`