starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-04 16:14:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: keep event titles readable in month days when the time and calendar name are on

Browse Source
This commit is contained in:
Linus Rath
2026-11-03 06:52:24 +01:00
parent d070118a8f
commit afd6b5a5c0
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar/event-card.tsx
+23 -17
View File
@@ -292,15 +292,17 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
...style,
}}
>
<div className="flex items-center gap-1 min-w-0">
{textStyle === "dot" && (
<span data-event-dot aria-hidden="true" className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
)}
<span className="flex-shrink-0 font-normal opacity-85">{safeFormat(startDate, timeFmt)}</span>
<span dir="auto" className="flex-1 min-w-0 truncate text-start font-medium">{event.title || t("events.no_title")}</span>
{visibleCalendarName && (
<span data-calendar-name dir="auto" className="min-w-0 max-w-[45%] shrink truncate font-normal opacity-85">{visibleCalendarName}</span>
)}
<div className="@container">
<div className="flex items-center gap-1 min-w-0">
{textStyle === "dot" && (
<span data-event-dot aria-hidden="true" className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
)}
<span className="hidden @min-[5.5rem]:inline flex-shrink-0 font-normal opacity-85">{safeFormat(startDate, timeFmt)}</span>
<span dir="auto" className="flex-1 min-w-0 truncate text-start font-medium">{event.title || t("events.no_title")}</span>
{visibleCalendarName && (
<span data-calendar-name dir="auto" className="hidden @min-[9rem]:inline min-w-0 max-w-[45%] shrink truncate font-normal opacity-85">{visibleCalendarName}</span>
)}
</div>
</div>
</button>
);
@@ -327,14 +329,18 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
)}
style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected, tinted }), ...style }}
>
<div className="flex items-center gap-1 min-w-0">
{showTimeInMonthView && !event.showWithoutTime && (
<span className="flex-shrink-0 font-normal opacity-85">{format(startDate, timeFmt)}</span>
)}
<span dir="auto" className={cn("flex-1 min-w-0 truncate text-start font-medium", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
{visibleCalendarName && (
<span data-calendar-name dir="auto" className="min-w-0 max-w-[45%] shrink truncate font-normal opacity-85">{visibleCalendarName}</span>
)}
{/* The title comes first: in a narrow day the time and the calendar's
name left it no room, or one letter. */}
<div className="@container">
<div className="flex items-center gap-1 min-w-0">
{showTimeInMonthView && !event.showWithoutTime && (
<span className="hidden @min-[5.5rem]:inline flex-shrink-0 font-normal opacity-85">{format(startDate, timeFmt)}</span>
)}
<span dir="auto" className={cn("flex-1 min-w-0 truncate text-start font-medium", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
{visibleCalendarName && (
<span data-calendar-name dir="auto" className="hidden @min-[9rem]:inline min-w-0 max-w-[45%] shrink truncate font-normal opacity-85">{visibleCalendarName}</span>
)}
</div>
</div>
</button>
);