fix(react-email): Sidebar overflowing issues (#1996)

Co-authored-by: Zeno Rocha <[email protected]>

Author: gabrielmfern

packages/react-email/src/components/sidebar/file-tree-directory-children.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectory } from './file-tree-directory';
 
 export const FileTreeDirectoryChildren = (props: {
@@ -77,7 +78,7 @@ export const FileTreeDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
                             props.isRoot ? undefined : 'pl-3',
                             {
                               'text-cyan-11': isCurrentPage,
@@ -116,7 +117,16 @@ export const FileTreeDirectoryChildren = (props: {
                             height="20"
                             width="20"
                           />
-                          <span className="truncate">{emailFilename}</span>
+                          <Tooltip.Provider>
+                            <Tooltip>
+                              <Tooltip.Trigger asChild>
+                                <span className="truncate w-[calc(100%-1.25rem)]">
+                                  {emailFilename}
+                                </span>
+                              </Tooltip.Trigger>
+                              <Tooltip.Content>{emailFilename}</Tooltip.Content>
+                            </Tooltip>
+                          </Tooltip.Provider>
                         </motion.span>
                       </Link>
                     );

packages/react-email/src/components/sidebar/file-tree-directory.tsx

@@ -7,6 +7,7 @@ import { Heading } from '../heading';
 import { IconArrowDown } from '../icons/icon-arrow-down';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectoryChildren } from './file-tree-directory-children';
 
 interface SidebarDirectoryProps {
@@ -51,31 +52,38 @@ export const FileTreeDirectory = ({
     >
       <Collapsible.Trigger
         className={cn(
-          'mt-1 mb-1.5 flex w-full items-center justify-between gap-2 font-medium text-[14px]',
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
           {
             'cursor-pointer': !isEmpty,
           },
         )}
       >
-        <div className="flex items-center gap-2 text-slate-11 transition duration-200 ease-in-out hover:text-slate-12">
-          {open ? (
-            <IconFolderOpen height="20" width="20" />
-          ) : (
-            <IconFolder height="20" width="20" />
-          )}
-          <Heading
-            as="h3"
-            className="transition duration-200 ease-in-out hover:text-slate-12"
-            color="gray"
-            size="2"
-            weight="medium"
-          >
-            {directoryMetadata.directoryName}
-          </Heading>
-        </div>
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Tooltip.Provider>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <Heading
+                as="h3"
+                className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+                color="gray"
+                size="2"
+                weight="medium"
+              >
+                {directoryMetadata.directoryName}
+              </Heading>
+            </Tooltip.Trigger>
+            <Tooltip.Content>{directoryMetadata.directoryName}</Tooltip.Content>
+          </Tooltip>
+        </Tooltip.Provider>
         {!isEmpty ? (
           <IconArrowDown
-            className="justify-self-end opacity-60 transition-transform data-[open=true]:rotate-180"
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
             data-open={open}
           />
         ) : null}

packages/react-email/src/components/sidebar/file-tree.tsx

@@ -13,8 +13,8 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem]">
-      <nav className="flex w-full flex-grow flex-col overflow-y-auto p-4 pr-0 pl-0">
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
+      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>
             <FileTreeDirectoryChildren

packages/react-email/src/components/sidebar/sidebar.tsx

@@ -16,28 +16,26 @@ 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-ful overflow-hidden bg-black will-change-auto',
+        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-full bg-black will-change-auto',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
     >
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden">
-        <div className="flex w-full h-full flex-col border-slate-6 border-r">
-          <div
-            className={clsx(
-              'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
-            )}
-          >
-            <h2>
-              <Logo />
-            </h2>
-          </div>
-          <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
-            <FileTree
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              emailsDirectoryMetadata={emailsDirectoryMetadata}
-            />
-          </div>
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden border-slate-4 border-t px-4 pb-3">
+          <FileTree
+            currentEmailOpenSlug={currentEmailOpenSlug}
+            emailsDirectoryMetadata={emailsDirectoryMetadata}
+          />
         </div>
       </div>
     </aside>