alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-04-30 23:01:36 +02:00
parent 5adf1a9a62
commit 81a107147c
1 changed files with 79 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/email/EmailDetailView.tsx
View File

@ -89,7 +89,7 @@ export default function EmailDetailView({
}; };
return ( return (
<> <div className="flex flex-col h-full overflow-hidden">
{/* Email actions header */} {/* Email actions header */}
<div className="flex-none px-4 py-3 border-b border-gray-100"> <div className="flex-none px-4 py-3 border-b border-gray-100">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -147,8 +147,10 @@ export default function EmailDetailView({
</div> </div>
</div> </div>
{/* Scrollable content area */} {/* Scrollable content area - enhanced for better scrolling */}
<ScrollArea className="flex-1 p-6"> <ScrollArea className="flex-1 overflow-auto">
<div className="p-6">
{/* Email header info */}
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-4 mb-6">
<Avatar className="h-10 w-10"> <Avatar className="h-10 w-10">
<AvatarFallback> <AvatarFallback>
@ -173,8 +175,8 @@ export default function EmailDetailView({
</div> </div>
</div> </div>
{/* Email content */} {/* Email content with improved scrolling */}
<div className="prose prose-sm max-w-none"> <div className="prose prose-sm max-w-none email-content-wrapper">
{renderEmailContent()} {renderEmailContent()}
</div> </div>
@ -197,7 +199,35 @@ export default function EmailDetailView({
</div> </div>
</div> </div>
)} )}
</div>
</ScrollArea> </ScrollArea>
</>
{/* Add CSS for better email content display */}
<style jsx global>{`
.email-content-wrapper {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.email-content-wrapper img {
max-width: 100%;
height: auto;
}
.email-content-wrapper table {
max-width: 100%;
overflow-x: auto;
display: block;
}
@media (max-width: 640px) {
.email-content-wrapper {
font-size: 14px;
}
}
`}</style>
</div>
); );
} }