diff --git a/components/calendar/event-card.tsx b/components/calendar/event-card.tsx
index 66a09c008..1113fd0b7 100644
--- a/components/calendar/event-card.tsx
+++ b/components/calendar/event-card.tsx
@@ -219,12 +219,15 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
       style={{ ...eventFillStyle(color, { inactive: isInactive, separated: true, selected: isSelected }), ...style }}
     >
       {/* Shorter blocks have no room for a second line at the 60px hour, so
-          their start time follows the title on the same line. */}
-      <div className="flex items-baseline gap-1 min-w-0">
-        <span className={cn("font-medium truncate", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
-        {!event.showWithoutTime && durationMinutes < 45 && (
-          <span className="flex-shrink-0 opacity-85 text-[10.5px]">{safeFormat(startDate, timeFmt)}</span>
-        )}
+          their start time follows the title on the same line, when the
+          block is wide enough to keep the title readable. */}
+      <div className="@container">
+        <div className="flex items-baseline gap-1 min-w-0">
+          <span className={cn("font-medium truncate", isInactive && "line-through")}>{event.title || t("events.no_title")}</span>
+          {!event.showWithoutTime && durationMinutes < 45 && (
+            <span className="hidden @min-[120px]:inline flex-shrink-0 opacity-85 text-[10.5px]">{safeFormat(startDate, timeFmt)}</span>
+          )}
+        </div>
       </div>
       {!event.showWithoutTime && durationMinutes >= 45 && (
         <div className="opacity-85 text-[10.5px]">