Skip to content

Commit 7545c7d

Browse files
authored
fix: remove primary border from draft list and overflow visible (#1984)
## 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 -->
1 parent 6a63208 commit 7545c7d

File tree

1 file changed

+1
-6
lines changed

1 file changed

+1
-6
lines changed

apps/mail/components/mail/mail-list.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -627,7 +627,7 @@ const Draft = memo(({ message, index }: { message: { id: string }; index: number
627627
<div
628628
key={message.id}
629629
className={cn(
630-
'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',
630+
'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',
631631
)}
632632
>
633633
<div
@@ -658,11 +658,6 @@ const Draft = memo(({ message, index }: { message: { id: string }; index: number
658658
</TooltipContent>
659659
</Tooltip>
660660
</div>
661-
<div
662-
className={cn(
663-
'bg-primary absolute inset-y-0 left-0 w-1 -translate-x-2 transition-transform ease-out',
664-
)}
665-
/>
666661
<div className="flex w-full items-center justify-between gap-4 px-4">
667662
<div className="flex w-full justify-between">
668663
<div className="w-full">

0 commit comments

Comments
 (0)