react-email 2.0.0-canary.2 → 2.0.0-canary.3

package/cli/index.js

@@ -252,7 +252,7 @@ var import_extra_typings = require("@commander-js/extra-typings");
 // package.json
 var package_default = {
     name: "react-email",
-    version: "2.0.0-canary.2",
+    version: "2.0.0-canary.3",
     description: "A live preview of your emails right in your browser.",
     bin: {
         email: "./cli/index.js"

package/cli/index.mjs

@@ -6,7 +6,7 @@ import { program } from "@commander-js/extra-typings";
 // package.json
 var package_default = {
   name: "react-email",
-  version: "2.0.0-canary.2",
+  version: "2.0.0-canary.3",
   description: "A live preview of your emails right in your browser.",
   bin: {
     email: "./cli/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "2.0.0-canary.2",
+  "version": "2.0.0-canary.3",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./cli/index.js"

package/src/components/sidebar/sidebar-directory-children.tsx

@@ -66,7 +66,7 @@ export const SidebarDirectoryChildren = (props: {
                       >
                         <motion.span
                           className={cn(
-                            'text-[14px] flex items-center font-medium gap-2 w-full pl-4 h-8 rounded-md text-slate-11 relative transition ease-in-out duration-200',
+                            'text-[14px] flex items-center align-middle font-medium pl-4 h-8 max-w-full rounded-md text-slate-11 relative transition ease-in-out duration-200',
                             {
                               'text-cyan-11': isCurrentPage,
                               'hover:text-slate-12':
@@ -85,8 +85,8 @@ export const SidebarDirectoryChildren = (props: {
                               <div className="bg-cyan-11 w-px absolute top-1 left-2.5 h-6" />
                             </motion.span>
                           ) : null}
-                          <IconFile height="24" width="24" />
-                          {emailFilename}
+                          <IconFile className="absolute left-4 w-[24px] h-[24px]" height="24" width="24" />
+                          <span className="truncate pl-8">{emailFilename}</span>
                         </motion.span>
                       </Link>
                     );

package/src/components/sidebar/sidebar.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useEmails } from '../../contexts/emails';
+import { cn } from '../../utils';
 import { SidebarDirectory } from './sidebar-directory';
 
 type SidebarElement = React.ElementRef<'aside'>;
@@ -16,10 +17,10 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
     const { emailsDirectoryMetadata } = useEmails();
 
     return (
-      <aside className={className} ref={forwardedRef} {...props}>
-        <nav className="p-6 h-full w-screen md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col gap-4 border-r border-slate-6">
+      <aside className={cn('border-r border-slate-6', className)} ref={forwardedRef} {...props}>
+        <nav className="p-6 w-screen h-full md:w-full md:min-w-[275px] md:max-w-[275px] flex flex-col gap-4">
           <SidebarDirectory
-            className="min-w-full w-fit overflow-x-auto"
+            className="min-w-full w-full"
             currentEmailOpenSlug={currentEmailOpenSlug}
             emailsDirectoryMetadata={emailsDirectoryMetadata}
           />