src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust max width of calendar invitation banner for better layout

Browse Source
This commit is contained in:
Linus Rath
2026-04-02 14:56:04 +02:00
parent c4673acb65
commit 9d97b74684
2 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/calendar-invitation-banner.tsx
+57 -56
View File
@@ -754,49 +754,67 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
{/* Content */} {/* Content */}
<div className="px-4 py-3 space-y-2.5"> <div className="px-4 py-3 space-y-2.5">
{/* Event title */} <div className="lg:flex lg:gap-6">
{summary?.title && ( {/* Left: Event info */}
<div className="flex items-start justify-between gap-2"> <div className="lg:flex-1 space-y-2.5 min-w-0">
<h3 className={cn( {/* Event title */}
"text-base font-semibold leading-snug", {summary?.title && (
isCancellation ? "line-through text-muted-foreground" : "text-foreground" <div className="flex items-start justify-between gap-2">
)}> <h3 className={cn(
{summary.title} "text-base font-semibold leading-snug",
</h3> isCancellation ? "line-through text-muted-foreground" : "text-foreground"
{parsedEvent?.sequence != null && parsedEvent.sequence > 0 && ( )}>
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap"> {summary.title}
{t('event_updated', { sequence: parsedEvent.sequence })} </h3>
</span> {parsedEvent?.sequence != null && parsedEvent.sequence > 0 && (
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground flex-shrink-0 whitespace-nowrap">
{t('event_updated', { sequence: parsedEvent.sequence })}
</span>
)}
</div>
)} )}
</div>
)}
{/* Event details */} {/* Event details */}
<div className="space-y-1"> <div className="lg:flex lg:items-center lg:gap-4 lg:flex-wrap space-y-1 lg:space-y-0">
{summary?.start && ( {summary?.start && (
<div className="flex items-center gap-1.5 text-sm text-muted-foreground"> <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
<Clock className="w-3.5 h-3.5 flex-shrink-0" /> <Clock className="w-3.5 h-3.5 flex-shrink-0" />
<span> <span>
{formatDateTime(summary.start)} {formatDateTime(summary.start)}
{summary.end && ` – ${formatDateTime(summary.end)}`} {summary.end && ` – ${formatDateTime(summary.end)}`}
</span> </span>
</div>
)}
{summary?.location && (
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
<MapPin className="w-3.5 h-3.5 flex-shrink-0" />
<span>{summary.location}</span>
</div>
)}
{summary?.organizer && (
<span className="flex items-center gap-1.5 text-sm text-muted-foreground">
<Users className="w-3.5 h-3.5 flex-shrink-0" />
{t('organizer', { name: summary.organizer })}
</span>
)}
{summary && summary.attendeeCount > 0 && (
<span className="text-sm text-muted-foreground">{t('attendees', { count: summary.attendeeCount })}</span>
)}
</div> </div>
)} </div>
{summary?.location && (
<div className="flex items-center gap-1.5 text-sm text-muted-foreground"> {/* Right: Info & actor messages on large screens */}
<MapPin className="w-3.5 h-3.5 flex-shrink-0" /> <div className="lg:flex-shrink-0 lg:text-right lg:max-w-xs mt-2.5 lg:mt-0 space-y-1">
<span>{summary.location}</span> {bannerInfo && (
</div> <p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
)}
<div className="flex items-center gap-3 text-sm text-muted-foreground flex-wrap">
{summary?.organizer && (
<span className="flex items-center gap-1.5">
<Users className="w-3.5 h-3.5 flex-shrink-0" />
{t('organizer', { name: summary.organizer })}
</span>
)} )}
{summary && summary.attendeeCount > 0 && ( {actorMessage && (
<span>{t('attendees', { count: summary.attendeeCount })}</span> <p className="text-xs text-muted-foreground">{actorMessage}</p>
)}
{actorSummary?.participationComment && (
<p className="text-xs text-muted-foreground italic">
{t('actor_note', { comment: actorSummary.participationComment })}
</p>
)} )}
</div> </div>
</div> </div>
@@ -840,23 +858,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
</div> </div>
)} )}
{/* Info text */}
{bannerInfo && (
<p className="text-xs text-muted-foreground leading-relaxed">{bannerInfo}</p>
)}
{/* Actor message */}
{actorMessage && (
<p className="text-xs text-muted-foreground">{actorMessage}</p>
)}
{/* Actor comment */}
{actorSummary?.participationComment && (
<p className="text-xs text-muted-foreground italic">
{t('actor_note', { comment: actorSummary.participationComment })}
</p>
)}
{/* Proposed changes */} {/* Proposed changes */}
{proposedChanges.length > 0 && ( {proposedChanges.length > 0 && (
<div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs"> <div className="rounded-md border border-border bg-muted/30 px-3 py-2.5 text-xs">
components/email/email-viewer.tsx
+1 -1
View File
@@ -4507,7 +4507,7 @@ export function EmailViewer({
{((hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow') || {((hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow') ||
hasCalendarInvitation) && ( hasCalendarInvitation) && (
<div className="border-b border-border bg-muted/30 isolate"> <div className="border-b border-border bg-muted/30 isolate">
<div className="max-w-4xl mx-auto px-6 py-1.5"> <div className="max-w-6xl mx-auto px-6 py-1.5">
<div className="flex flex-col gap-3 isolate"> <div className="flex flex-col gap-3 isolate">
{/* External Content Controls */} {/* External Content Controls */}
{hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && ( {hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && (