From 7545c7d281bb7230812554c615268523aa1d7367 Mon Sep 17 00:00:00 2001
From: Ahmet Kilinc <akx9@icloud.com>
Date: Mon, 11 Aug 2025 18:31:09 +0100
Subject: [PATCH] fix: remove primary border from draft list and overflow
 visible (#1984)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Fixed a UI issue in the mail list component by changing the overflow behavior of draft messages from `overflow-clip` to `overflow-visible`. Also removed an unnecessary decorative bar element that was positioned absolutely on the left side of draft messages.

## Type of Change

- [x] 🐛 Bug fix (non-breaking change which fixes an issue)
- [x] 🎨 UI/UX improvement

## Areas Affected

- [x] User Interface/Experience

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Style**
  - Updated the appearance of draft messages in the Mail list: removed the left-side accent line for a cleaner look.
  - Adjusted item layout to allow content to display fully without being clipped, improving readability and visual consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/mail/components/mail/mail-list.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/mail/components/mail/mail-list.tsx b/apps/mail/components/mail/mail-list.tsx
index 71ec1e270..4cbe8df3a 100644
--- a/apps/mail/components/mail/mail-list.tsx
+++ b/apps/mail/components/mail/mail-list.tsx
@@ -627,7 +627,7 @@ const Draft = memo(({ message, index }: { message: { id: string }; index: number
       <div
         key={message.id}
         className={cn(
-          'hover:bg-offsetLight dark:hover:bg-primary/5 group relative mx-[8px] flex cursor-pointer flex-col items-start overflow-clip rounded-[10px] border-transparent py-3 text-left text-sm hover:opacity-100',
+          'hover:bg-offsetLight dark:hover:bg-primary/5 group relative mx-[8px] flex cursor-pointer flex-col items-start overflow-visible rounded-[10px] border-transparent py-3 text-left text-sm hover:opacity-100',
         )}
       >
         <div
@@ -658,11 +658,6 @@ const Draft = memo(({ message, index }: { message: { id: string }; index: number
             </TooltipContent>
           </Tooltip>
         </div>
-        <div
-          className={cn(
-            'bg-primary absolute inset-y-0 left-0 w-1 -translate-x-2 transition-transform ease-out',
-          )}
-        />
         <div className="flex w-full items-center justify-between gap-4 px-4">
           <div className="flex w-full justify-between">
             <div className="w-full">