From e50fe0d4db61bc215e51aeb8146a9bf9e9719536 Mon Sep 17 00:00:00 2001
From: Shuki Vaknin <shukivaknin@gmail.com>
Date: Mon, 22 Jun 2026 16:37:40 +0300
Subject: [PATCH] fix(mail-list): add breathing room between the unread dot and
 the avatar

The unread indicator dot was absolutely positioned at `left-1` (4px), leaving
only ~4px between it and the avatar (which starts at the row's `px-4` gutter),
so the dot read as flush against the avatar. Move it to `left-0.5` so it sits
nearer the panel edge (like other mail clients) and opens the dot-to-avatar gap
to ~6px. Applied to both email-list-item and thread-list-item (all three
absolute dot instances).
---
 components/email/email-list-item.tsx  | 2 +-
 components/email/thread-list-item.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
index 84813009..841c9334 100644
--- a/components/email/email-list-item.tsx
+++ b/components/email/email-list-item.tsx
@@ -162,7 +162,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
 
         {/* Unread indicator */}
         {isUnread && (
-          <div className="absolute left-1 top-1/2 -translate-y-1/2">
+          <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
             <Circle className="w-2 h-2 fill-unread text-unread" />
           </div>
         )}
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index cacc4d83..9c2f3287 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -188,7 +188,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
           )}
 
           {isUnread && (
-            <div className="absolute left-1 top-1/2 -translate-y-1/2">
+            <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
               <Circle className="w-2 h-2 fill-unread text-unread" />
             </div>
           )}
@@ -585,7 +585,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
             )}
 
             {hasUnread && (
-              <div className="absolute left-1 top-1/2 -translate-y-1/2">
+              <div className="absolute left-0.5 top-1/2 -translate-y-1/2">
                 <Circle className="w-2 h-2 fill-unread text-unread" />
               </div>
             )}