Fixed partnerui message viewer
This commit is contained in:
@@ -2123,7 +2123,8 @@ export function DashboardPage() {
|
||||
===================================================================== */}
|
||||
{selectedNotification && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-md p-4 animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-2xl rounded-2xl bg-[#0d1322] border border-white/10 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
||||
<div className="w-full max-w-3xl xl:max-w-4xl rounded-2xl bg-[#0d1322] border border-white/10 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
|
||||
{/* Modal Header */}
|
||||
<div className="p-5 border-b border-white/[0.08] flex items-center justify-between bg-[#0b101d] shrink-0">
|
||||
<div className="min-w-0 pr-4">
|
||||
<h3 className="text-base font-bold text-white truncate">
|
||||
@@ -2141,38 +2142,42 @@ export function DashboardPage() {
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5 space-y-4 overflow-y-auto flex-1">
|
||||
|
||||
{/* Scrollable Modal Body containing the Message Reading Pane */}
|
||||
<div className="p-4 sm:p-5 overflow-y-auto overflow-x-hidden flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#334155_transparent]">
|
||||
<MessageViewer
|
||||
content={selectedNotification.message || ''}
|
||||
platform={selectedNotification.platform}
|
||||
subject={selectedNotification.subject}
|
||||
/>
|
||||
<div className="flex items-center justify-end gap-3 pt-3 border-t border-white/[0.08] shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedNotification(null)}
|
||||
className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold cursor-pointer transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const subj = selectedNotification.subject || 'Notification';
|
||||
setSelectedNotification(null);
|
||||
setContactTarget({
|
||||
organisation: partnerSummary.primaryFundingOrg,
|
||||
projectTitle: 'Reply',
|
||||
});
|
||||
setMessageSubject(subj.startsWith('Re:') ? subj : `Re: ${subj}`);
|
||||
setMessageBody('');
|
||||
}}
|
||||
className="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold text-xs flex items-center gap-1.5 cursor-pointer transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
<span>Reply</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sticky Modal Footer */}
|
||||
<div className="px-5 py-3.5 border-t border-white/[0.08] bg-[#0b101d] flex items-center justify-end gap-3 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedNotification(null)}
|
||||
className="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold cursor-pointer transition"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const subj = selectedNotification.subject || 'Notification';
|
||||
setSelectedNotification(null);
|
||||
setContactTarget({
|
||||
organisation: partnerSummary.primaryFundingOrg,
|
||||
projectTitle: 'Reply',
|
||||
});
|
||||
setMessageSubject(subj.startsWith('Re:') ? subj : `Re: ${subj}`);
|
||||
setMessageBody('');
|
||||
}}
|
||||
className="px-4 py-2 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-semibold text-xs flex items-center gap-1.5 cursor-pointer transition shadow-lg shadow-emerald-500/20"
|
||||
>
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
<span>Reply</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user