chore

app/emails/email.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { User } from "@prisma/client";
 
 // import { useMediaQuery } from "@/hooks/use-media-query";
@@ -11,12 +11,17 @@ export function EmailDashboard({ user }: { user: User }) {
   const [selectedEmailAddress, setSelectedEmailAddress] = useState<
     string | null
   >(null);
+  // const { isTablet } = useMediaQuery();
   const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null);
 
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const [isAdminModel, setAdminModel] = useState(false);
 
+  // useEffect(() => {
+  //   setIsCollapsed(!isTablet);
+  // }, [isTablet]);
+
   return (
     <div className="flex h-[calc(100vh-60px)] w-full">
       <EmailSidebar
@@ -30,6 +35,7 @@ export function EmailDashboard({ user }: { user: User }) {
         setAdminModel={setAdminModel}
       />
       <EmailList
+        className="flex-1"
         emailAddress={selectedEmailAddress}
         selectedEmailId={selectedEmailId}
         onSelectEmail={setSelectedEmailId}

components/email/EmailDetail.tsx

@@ -168,36 +168,36 @@ export default function EmailDetail({
       )}
     >
       <div className="flex items-start justify-between gap-2 border-b px-2 py-2">
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-900 text-sm font-bold text-white">
+        <div
+          onClick={onClose}
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-900 text-sm font-bold text-white"
+        >
           {email.subject?.[0].toUpperCase() ||
             email.fromName?.[0].toUpperCase() ||
             "U"}
         </div>
-        <div className="mr-auto text-xs text-neutral-600 dark:text-neutral-300">
+        <div className="max-w-[80%] flex-grow text-xs text-neutral-600 dark:text-neutral-300">
           <TooltipProvider>
             <Tooltip delayDuration={100}>
-              <TooltipTrigger className="w-4/5 truncate text-left">
+              <TooltipTrigger className="line-clamp-2 text-wrap text-left">
                 <strong>From:</strong> {email.fromName} &lt;{email.from}&gt;
               </TooltipTrigger>
-              <TooltipContent className="w-60">
-                {email.fromName} &lt;{email.from}&gt;
+              <TooltipContent side="bottom" className="w-60 text-wrap">
+                {email.fromName} <br />
+                {email.from}
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>
           <p>
             <strong>To:</strong> {email.to}
           </p>
-          <p>
-            <strong>Reply-To:</strong> {email.replyTo}
-          </p>
+          {email.replyTo && (
+            <p>
+              <strong>Reply-To:</strong> {email.replyTo}
+            </p>
+          )}
           <p>
             <strong>Date:</strong> {formatDate(email.date as any)}
-            {/* {email.readAt && (
-              <>
-                <strong className="ml-2">Read At</strong>:{" "}
-                {formatDate(email.readAt as any)}
-              </>
-            )} */}
           </p>
           {attachments.length > 0 && (
             <p>
@@ -206,7 +206,7 @@ export default function EmailDetail({
           )}
         </div>
         <Button
-          className="ml-auto size-8 px-1 py-1"
+          className="ml-auto size-8 flex-grow-0 px-1 py-1"
           size={"sm"}
           onClick={onClose}
           variant={"outline"}
@@ -215,7 +215,7 @@ export default function EmailDetail({
         </Button>
       </div>
 
-      <div className="scrollbar-hidden flex h-full flex-col justify-between overflow-y-auto overflow-x-scroll px-2 py-3">
+      <div className="scrollbar-hidden flex h-full flex-col justify-between overflow-y-auto px-2 py-3">
         <div
           className=""
           dangerouslySetInnerHTML={{

components/email/EmailList.tsx

@@ -390,7 +390,7 @@ export default function EmailList({
         </div>
       )}
       {!isLoading && !error && (
-        <div className="scrollbar-hidden relative h-[calc(100vh-105px)] animate-fade-in overflow-y-scroll p-3">
+        <div className="scrollbar-hidden relative h-[calc(100vh-105px)] animate-fade-in overflow-scroll p-3">
           {selectedEmailId ? (
             <EmailDetail
               email={data?.list?.find((email) => email.id === selectedEmailId)}

components/email/EmailSidebar.tsx

@@ -291,9 +291,9 @@ export default function EmailSidebar({
         </Button>
 
         {!isCollapsed && (
-          <div className="mt-4 grid grid-cols-2 gap-2 rounded-lg text-xs text-neutral-700 dark:bg-gray-900 dark:text-neutral-400">
+          <div className="mt-4 grid grid-cols-2 gap-2 rounded-lg text-xs text-neutral-700 dark:bg-neutral-900 dark:text-neutral-400">
             {/* Address */}
-            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-gray-700">
               <div className="flex items-center gap-1">
                 <Icons.mail className="size-3" />
                 <p className="line-clamp-1 text-start font-medium">Address</p>
@@ -304,7 +304,7 @@ export default function EmailSidebar({
             </div>
 
             {/* Inbox Emails */}
-            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-gray-700">
               <div className="flex items-center gap-1">
                 <Icons.inbox className="size-3" />
                 <p className="line-clamp-1 text-start font-medium">
@@ -316,7 +316,7 @@ export default function EmailSidebar({
               </p>
             </div>
 
-            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-100 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-gray-700">
               <div className="flex items-center gap-1">
                 <Icons.mailOpen className="size-3" />
                 <p className="line-clamp-1 text-start font-medium">
@@ -329,7 +329,7 @@ export default function EmailSidebar({
             </div>
 
             {/* Sent Emails */}
-            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-200 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-gray-800 dark:hover:bg-gray-700">
+            <div className="flex flex-col items-center gap-1 rounded-md bg-neutral-200 px-1 pb-1 pt-2 transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-gray-700">
               <div className="flex items-center gap-1">
                 <Icons.send className="size-3" />
                 <p className="line-clamp-1 text-start font-medium">
@@ -408,9 +408,9 @@ export default function EmailSidebar({
             key={email.id}
             onClick={() => onSelectEmail(email.emailAddress)}
             className={cn(
-              `border-gray-5 m-1 cursor-pointer bg-neutral-50 p-2 transition-colors hover:bg-neutral-100 dark:border-zinc-700 dark:hover:bg-neutral-800`,
+              `border-gray-5 m-1 cursor-pointer bg-neutral-50 p-2 transition-colors hover:bg-neutral-100 dark:border-zinc-700 dark:bg-neutral-800 dark:hover:bg-neutral-900`,
               selectedEmailAddress === email.emailAddress
-                ? "bg-gray-100 dark:bg-neutral-800"
+                ? "bg-gray-100 dark:bg-neutral-900"
                 : "",
               isCollapsed ? "flex items-center justify-center" : "",
             )}