From 1f77ed91a74592a575898958a45345c491ea7746 Mon Sep 17 00:00:00 2001
From: rustmailer <pollybase@zohomail.com>
Date: Wed, 19 Nov 2025 22:07:02 +0800
Subject: [PATCH] fix(ui): mailbox email details sheet zoom and close actions
 not working #5

---
 .../mailbox/components/mail-display-drawer.tsx     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/features/mailbox/components/mail-display-drawer.tsx b/web/src/features/mailbox/components/mail-display-drawer.tsx
index 5961f88..49cfc40 100644
--- a/web/src/features/mailbox/components/mail-display-drawer.tsx
+++ b/web/src/features/mailbox/components/mail-display-drawer.tsx
@@ -20,11 +20,12 @@
 
 import {
   Sheet,
-  SheetContent
+  SheetContent,
+  SheetTitle
 } from '@/components/ui/sheet'
 import { useMailboxContext } from '../context'
 import { MailMessageView } from './mail-message-view'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 
 
 interface Props {
@@ -37,8 +38,11 @@ export function MailDisplayDrawer({ open, onOpenChange }: Props) {
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
+      <VisuallyHidden asChild>
+        <SheetTitle />
+      </VisuallyHidden>
       <SheetContent className="md:w-[80rem] h-full p-0">
-        <ScrollArea>
+
           <div className='m-5'>
             {currentEnvelope ? (
               <MailMessageView envelope={currentEnvelope} />
@@ -46,8 +50,8 @@ export function MailDisplayDrawer({ open, onOpenChange }: Props) {
               <div className="p-8 text-center text-muted-foreground">No message selected</div>
             )}
           </div>
-        </ScrollArea>
-      </SheetContent>
+
+        </SheetContent>
     </Sheet>
   );
 }