fix: Preview and code view clipping with toolbar open (#1999)

gabrielmfern · zehfernandes · gabrielmfern · commit e8e19f1e8847 · 2025-03-27T17:55:20.000-03:00
Co-authored-by: Zeh Fernandes &lt;ozehfernandes@gmail.com&gt;
diff --git a/packages/react-email/src/app/layout.tsx b/packages/react-email/src/app/layout.tsx
@@ -27,7 +27,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       className={`${inter.variable} ${sfMono.variable} font-sans`}
       lang="en"
     >
-      <body className="relative flex h-screen flex-col overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+      <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
         <EmailsProvider
           initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
         >
diff --git a/packages/react-email/src/app/page.tsx b/packages/react-email/src/app/page.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button, Heading, Text } from '../components';
 import CodeSnippet from '../components/code-snippet';
-import { Shell, ShellContent } from '../components/shell';
+import { Shell } from '../components/shell';
 import { emailsDirectoryAbsolutePath } from './env';
 import logo from './logo.png';
 
@@ -12,8 +12,8 @@ const Home = () => {
 
   return (
     <Shell>
-      <ShellContent className="mx-auto flex max-w-lg items-center justify-center p-8">
-        <div className="-mt-10 relative flex flex-col items-center gap-3 text-center">
+      <div className="w-full h-full flex items-center justify-center p-8">
+        <div className="-mt-10 relative max-w-lg flex flex-col items-center gap-3 text-center">
           <Image
             alt="React Email Icon"
             className="mb-8"
@@ -38,7 +38,7 @@ const Home = () => {
             <Link href="https://react.email/docs">Check the docs</Link>
           </Button>
         </div>
-      </ShellContent>
+      </div>
     </Shell>
   );
 };
diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx
@@ -1,30 +1,31 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useRef } from 'react';
+import { use, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
-  ResizableWarpper,
+  ResizableWrapper,
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
 import { Send } from '../../../components/send';
-import { ShellContent } from '../../../components/shell';
+import { useToolbarState } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
 import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
 import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { PreviewContext } from '../../../contexts/preview';
 import { useClampedState } from '../../../hooks/use-clamped-state';
+import { cn } from '../../../utils';
 import { RenderingError } from './rendering-error';
 
-interface PreviewProps {
+interface PreviewProps extends React.ComponentProps<'div'> {
   emailTitle: string;
 }
 
-const Preview = ({ emailTitle }: PreviewProps) => {
+const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
   const { renderingResult, renderedEmailMetadata } = use(PreviewContext)!;
 
   const router = useRouter();
@@ -53,21 +54,21 @@ const Preview = ({ emailTitle }: PreviewProps) => {
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
-  const maxWidthRef = useRef(Number.POSITIVE_INFINITY);
-  const maxHeightRef = useRef(Number.POSITIVE_INFINITY);
-  const minWidth = 350;
-  const minHeight = 600;
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const minWidth = 100;
+  const minHeight = 100;
   const storedWidth = searchParams.get('width');
   const storedHeight = searchParams.get('height');
   const [width, setWidth] = useClampedState(
     storedWidth ? Number.parseInt(storedWidth) : 600,
-    350,
-    maxWidthRef.current,
+    minWidth,
+    maxWidth,
   );
   const [height, setHeight] = useClampedState(
     storedHeight ? Number.parseInt(storedHeight) : 1024,
-    600,
-    maxHeightRef.current,
+    minHeight,
+    maxHeight,
   );
 
   const handleSaveViewSize = useDebouncedCallback(() => {
@@ -77,6 +78,8 @@ const Preview = ({ emailTitle }: PreviewProps) => {
     router.push(`${pathname}?${params.toString()}${location.hash}`);
   }, 300);
 
+  const { toggled: toolbarToggled } = useToolbarState();
+
   return (
     <>
       <Topbar emailTitle={emailTitle}>
@@ -107,14 +110,20 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
       </Topbar>
 
-      <ShellContent
-        className="relative flex bg-gray-200 p-4"
+      <div
+        {...props}
+        className={cn(
+          'h-[calc(100%-3.5rem-2.375rem)] will-change-height flex p-4 transition-all duration-300',
+          activeView === 'preview' && 'bg-gray-200',
+          toolbarToggled && 'h-[calc(100%-3.5rem-13rem)]',
+          className,
+        )}
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              maxWidthRef.current = elementEntry.contentRect.width;
-              maxHeightRef.current = elementEntry.contentRect.height;
+              setMaxWidth(elementEntry.contentRect.width);
+              setMaxHeight(elementEntry.contentRect.height);
             }
           });
 
@@ -132,11 +141,11 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         {hasRenderingMetadata ? (
           <>
             {activeView === 'preview' && (
-              <ResizableWarpper
+              <ResizableWrapper
                 minHeight={minHeight}
                 minWidth={minWidth}
-                maxHeight={maxHeightRef.current}
-                maxWidth={maxWidthRef.current}
+                maxHeight={maxHeight}
+                maxWidth={maxWidth}
                 height={height}
                 onResizeEnd={() => {
                   handleSaveViewSize();
@@ -166,12 +175,12 @@ const Preview = ({ emailTitle }: PreviewProps) => {
                   }}
                   title={emailTitle}
                 />
-              </ResizableWarpper>
+              </ResizableWrapper>
             )}
 
             {activeView === 'source' && (
-              <div className="h-full w-full bg-black">
-                <div className="m-auto flex max-w-3xl p-6">
+              <div className="h-full w-full">
+                <div className="m-auto h-full flex max-w-3xl p-6">
                   <Tooltip.Provider>
                     <CodeContainer
                       activeLang={activeLang}
@@ -199,7 +208,7 @@ const Preview = ({ emailTitle }: PreviewProps) => {
         ) : null}
 
         <Toaster />
-      </ShellContent>
+      </div>
     </>
   );
 };
diff --git a/packages/react-email/src/components/code-container.tsx b/packages/react-email/src/components/code-container.tsx
@@ -39,7 +39,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
 
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
+      className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:
@@ -84,7 +84,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
           filename={`email.${activeMarkup.language}`}
         />
       </div>
-      <div>
+      <div className="h-[calc(100%-2.25rem)]">
         <Code language={activeLang}>{activeMarkup.content}</Code>
       </div>
     </div>
diff --git a/packages/react-email/src/components/code.tsx b/packages/react-email/src/components/code.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import { Fragment, useEffect } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
 import { cn } from '../utils';
 
@@ -73,12 +73,18 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
     return highlight[0] <= line && highlight[1] >= line;
   };
 
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    if (highlight) {
-      document.getElementById(`L${highlight[0]}`)?.scrollIntoView({
-        block: 'start',
-        behavior: 'smooth',
-      });
+      const scroller = scrollerRef.current
+    if (highlight && scroller) {
+      const lineElement = scroller.querySelector(`#L${highlight[0]}`);
+      if (lineElement instanceof HTMLAnchorElement) {
+        scroller.scrollTo({
+          top: lineElement.offsetTop,
+          behavior: 'smooth',
+        });
+      }
     }
   }, [highlight]);
 
@@ -97,7 +103,10 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <div className="flex h-[650px] p-4 max-h-[calc(100vh-10rem)] after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto">
+          <div
+            ref={scrollerRef}
+            className="flex max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
+          >
             <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
               {tokens.map((_, i) => (
                 <Link
diff --git a/packages/react-email/src/components/resizable-wrapper.tsx b/packages/react-email/src/components/resizable-wrapper.tsx
@@ -4,7 +4,7 @@ import { cn } from '../utils';
 
 type Direction = 'north' | 'south' | 'east' | 'west';
 
-type ResizableWarpperProps = {
+type ResizableWrapperProps = {
   width: number;
   height: number;
 
@@ -41,7 +41,7 @@ export const makeIframeDocumentBubbleEvents = (iframe: HTMLIFrameElement) => {
   };
 };
 
-export const ResizableWarpper = ({
+export const ResizableWrapper = ({
   width,
   height,
   onResize,
@@ -54,7 +54,7 @@ export const ResizableWarpper = ({
   minWidth,
 
   ...rest
-}: ResizableWarpperProps) => {
+}: ResizableWrapperProps) => {
   const resizableRef = useRef<HTMLElement>(null);
 
   const mouseMoveListener = useRef<(event: MouseEvent) => void>(null);
diff --git a/packages/react-email/src/components/shell.tsx b/packages/react-email/src/components/shell.tsx
@@ -62,35 +62,31 @@ export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
           </svg>
         </button>
       </div>
-      <div className="flex w-[100dvw] h-[100dvh] flex-row">
+      <div className="w-[100dvw] flex h-[calc(100dvh-4.375rem)] lg:h-[100dvh]">
         <React.Suspense>
           <Sidebar
-            className={cn('shrink [transition:width_0.2s_ease-in-out]', {
-              '-translate-x-full lg:translate-x-0': sidebarToggled,
-              'lg:w-0': !sidebarToggled,
-            })}
+            className={cn(
+              'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
+              {
+                '-translate-x-full lg:translate-x-0': sidebarToggled,
+                'lg:w-0': !sidebarToggled,
+              },
+            )}
             currentEmailOpenSlug={currentEmailOpenSlug}
           />
         </React.Suspense>
         <main
           className={cn(
-            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0 w-full',
+            '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)]',
           )}
         >
-          <div className="relative flex h-full w-full flex-col">{children}</div>
+          {children}
         </main>
       </div>
     </ShellContext.Provider>
   );
 };
-
-type ShellContentRootProps = React.ComponentProps<'div'>;
-
-export const ShellContent = ({ children, ...rest }: ShellContentRootProps) => {
-  return (
-    <div {...rest} className={cn('relative grow', rest.className)}>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/react-email/src/components/sidebar/sidebar.tsx b/packages/react-email/src/components/sidebar/sidebar.tsx
@@ -16,7 +16,7 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-full bg-black will-change-auto',
+        'overflow-hidden bg-black',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
diff --git a/packages/react-email/src/components/toolbar.tsx b/packages/react-email/src/components/toolbar.tsx
@@ -23,6 +23,19 @@ import { useCachedState } from './toolbar/use-cached-state';
 
 export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
 
+export const useToolbarState = () => {
+  const searchParams = useSearchParams();
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
+    | undefined;
+
+  return {
+    activeTab,
+
+    toggled: activeTab !== undefined,
+  };
+};
+
 const ToolbarInner = ({
   serverLintingRows,
   serverSpamCheckingResult,
@@ -44,11 +57,7 @@ const ToolbarInner = ({
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ToolbarTabValue
-    | undefined;
-
-  const toggled = activeTab !== undefined;
+  const { activeTab, toggled } = useToolbarState();
 
   const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
     const params = new URLSearchParams(searchParams);
@@ -115,7 +124,7 @@ const ToolbarInner = ({
       className={cn(
         'absolute bottom-0 left-0 right-0',
         'bg-black group/toolbar text-xs text-slate-11 h-52 transition-transform',
-        'data-[toggled=false]:translate-y-[170px]',
+        'data-[toggled=false]:translate-y-[10.625rem]',
       )}
     >
       <Tabs.Root
diff --git a/packages/react-email/src/components/topbar.tsx b/packages/react-email/src/components/topbar.tsx

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ 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 overflow-x-hidden bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">`
	`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`	`31`	`<EmailsProvider`
`32`	`32`	`initialEmailsDirectoryMetadata={emailsDirectoryMetadata}`
`33`	`33`	`>`