@nomideusz/svelte-calendar 0.10.0 → 0.11.0

package/dist/calendar/Calendar.svelte

@@ -97,12 +97,16 @@ function handleEventClick(ev) {
   oneventclick?.(ev);
 }
 let containerWidth = $state(
-  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? MOBILE_BREAKPOINT - 1 : 0
+  typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? window.innerWidth : 0
 );
 const isMobileContainer = $derived(containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT);
 const useMobile = $derived(
   mobileProp === "auto" ? isMobileContainer : Boolean(mobileProp)
 );
+const HEADER_STACK_BREAKPOINT = 520;
+const stackHeader = $derived(
+  useMobile && containerWidth > 0 && containerWidth < HEADER_STACK_BREAKPOINT
+);
 let calEl = $state();
 let probedTheme = $state("");
 const needsProbe = $derived(theme === auto && autoTheme !== false);
@@ -480,7 +484,8 @@ const navCtx = $derived({
 
 	<!-- ─── Mobile header (flow layout, no absolute) ─── -->
 	{:else if useMobile && (showNavigation || (showModePills && modes.length > 1) || dateLabel)}
-		<div class="cal-m-hd">
+		{@const titleBelow = stackHeader && !!dateLabel}
+		<div class="cal-m-hd" class:cal-m-hd--stack={stackHeader} class:cal-m-hd--titled={titleBelow}>
 			<div class="cal-m-left">
 				{#if showModePills && modes.length > 1}
 					<div class="cal-m-pills" role="radiogroup" aria-label={L.viewMode}>
@@ -500,7 +505,9 @@ const navCtx = $derived({
 				{/if}
 			</div>
 
-			<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			{#if !titleBelow}
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			{/if}
 
 			<div class="cal-m-right">
 				{#if navigationSnippet}
@@ -525,6 +532,11 @@ const navCtx = $derived({
 				{/if}
 			</div>
 		</div>
+		{#if titleBelow}
+			<div class="cal-m-titlebar">
+				<span class="cal-m-title" role="status" aria-live="polite" aria-atomic="true">{dateLabel}</span>
+			</div>
+		{/if}
 
 	<!-- ─── Desktop header ─── -->
 	{:else if showNavigation || (showModePills && modes.length > 1) || dateLabel}
@@ -740,7 +752,9 @@ const navCtx = $derived({
 		transition: background 100ms, color 100ms;
 	}
 
-	.cal-pill:hover {
+	/* :not(--active) — the hover rule otherwise outranks the active color,
+	   and iOS keeps :hover stuck after a tap (dark text on the accent). */
+	.cal-pill:hover:not(.cal-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
@@ -806,6 +820,26 @@ const navCtx = $derived({
 		min-height: 44px;
 	}
 
+	/* Narrow containers: the date label moves to its own row (.cal-m-titlebar),
+	   so the controls row spreads pills and nav to the edges. */
+	.cal-m-hd--stack {
+		justify-content: space-between;
+	}
+	.cal-m-hd--titled {
+		border-bottom: none;
+		padding-bottom: 2px;
+	}
+	.cal-m-titlebar {
+		display: flex;
+		justify-content: center;
+		padding: 0 8px 8px;
+		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		flex-shrink: 0;
+	}
+	.cal-m-titlebar .cal-m-title {
+		flex: 0 1 auto;
+	}
+
 	.cal-m-left,
 	.cal-m-right {
 		display: flex;
@@ -867,7 +901,7 @@ const navCtx = $derived({
 		transition: background 100ms, color 100ms;
 		-webkit-tap-highlight-color: transparent;
 	}
-	.cal-m-pill:hover {
+	.cal-m-pill:hover:not(.cal-m-pill--active) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 	.cal-m-pill--active {

package/dist/views/agenda/AgendaDay.svelte

@@ -162,15 +162,17 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							<EventContent event={ev}>
 							<span class="ag-compact-row-dot"></span>
 							<span class="ag-compact-row-time">{fmt(ev.start)}</span>
-							<span class="ag-compact-row-title">{ev.title}</span>
-							{#if ev.subtitle}
-								<span class="ag-compact-row-sub">{ev.subtitle}</span>
-							{/if}
-							{#if ev.tags?.length}
-								{#each ev.tags as tag}
-									<span class="ag-compact-row-tag">{tag}</span>
-								{/each}
-							{/if}
+							<div class="ag-compact-row-main">
+								<span class="ag-compact-row-title">{ev.title}</span>
+								{#if ev.subtitle}
+									<span class="ag-compact-row-sub">{ev.subtitle}</span>
+								{/if}
+								{#if ev.tags?.length}
+									{#each ev.tags as tag}
+										<span class="ag-compact-row-tag">{tag}</span>
+									{/each}
+								{/if}
+							</div>
 							<span class="ag-compact-row-dur">{duration(ev)}</span>
 							</EventContent>
 						</button>
@@ -256,10 +258,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									<EventContent event={ev}>
 									<span class="ag-compact-row-dot"></span>
 									<span class="ag-compact-row-time">{fmt(ev.start)}</span>
-									<span class="ag-compact-row-title">{ev.title}</span>
-									{#if ev.subtitle}
-										<span class="ag-compact-row-sub">{ev.subtitle}</span>
-									{/if}
+									<div class="ag-compact-row-main">
+										<span class="ag-compact-row-title">{ev.title}</span>
+										{#if ev.subtitle}
+											<span class="ag-compact-row-sub">{ev.subtitle}</span>
+										{/if}
+									</div>
 									</EventContent>
 								</button>
 							{:else}
@@ -715,7 +719,11 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		font-size: 16px;
 		font-weight: 700;
 	}
-	.ag-card--plan .ag-card-sub {
+	/* Everything under the title aligns past the order number — the
+	   subtitle, location, time and tags share one left edge. */
+	.ag-card--plan .ag-card-sub,
+	.ag-card--plan .ag-card-loc,
+	.ag-card--plan .ag-card-meta {
 		padding-left: 22px;
 	}
 	.ag-card--plan .ag-card-tags {
@@ -1065,6 +1073,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		border-radius: 6px;
 		padding-left: 8px;
 		padding-right: 8px;
+		margin-left: -8px;
+		margin-right: -8px;
+		width: calc(100% + 16px);
 	}
 	.ag-log-check {
 		font-size: 10px;
@@ -1126,8 +1137,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
+		/* Highlight gutter comes from negative margins so the row's content
+		   stays aligned with its unselected siblings (no tap-shift). */
 		padding-left: 6px;
 		padding-right: 6px;
+		margin-left: -6px;
+		margin-right: -6px;
+		width: calc(100% + 12px);
 	}
 	.ag-compact-row:hover .ag-compact-row-title,
 	.ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
@@ -1156,11 +1172,43 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		flex-shrink: 0;
 		line-height: 1.4;
 	}
+	/* Title + subtitle + tags cluster. One line while it fits; on mobile the
+	   metadata wraps to a second line under the title instead of crushing it. */
+	.ag-compact-row-main {
+		display: flex;
+		align-items: baseline;
+		gap: 8px;
+		flex: 1;
+		min-width: 0;
+	}
+	.ag--mobile .ag-compact-row-main {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	/* Mobile: size the title by its content when deciding line breaks — a long
+	   title claims the first line whole (ellipsizing only against the full row)
+	   and pushes subtitle/tags down instead of truncating at 35%. */
+	.ag--mobile .ag-compact-row-title {
+		flex-basis: auto;
+	}
+	/* On its own wrapped line the subtitle gets the full width */
+	.ag--mobile .ag-compact-row-sub {
+		max-width: 100%;
+	}
+	/* Wrapped rows are two lines tall — center-aligning the dot floats it
+	   between lines; pin it optically to the first (title) line instead. */
+	.ag--mobile .ag-compact-row-dot {
+		align-self: flex-start;
+		margin-top: 8px;
+	}
 	.ag-compact-row-title {
 		font-size: 12px;
 		font-weight: 500;
 		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 82%, transparent);
 		flex: 1;
+		/* The title is the row's identity — never let subtitle/tags/duration
+		   squeeze it out on narrow screens (flex: 1 alone resolves to 0px). */
+		min-width: 35%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1178,7 +1226,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row-sub {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 1;
+		flex-shrink: 3;
+		min-width: 0;
 		max-width: 45%;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1192,7 +1241,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		padding: 1px 4px;
 		border-radius: 3px;
 		white-space: nowrap;
-		flex-shrink: 0;
+		flex-shrink: 1;
+		min-width: 2.5em;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	.ag-compact-row--cancelled { opacity: 0.5; }
 	.ag-compact-row--cancelled .ag-compact-row-title { text-decoration: line-through; }

package/dist/views/agenda/AgendaWeek.svelte

@@ -54,6 +54,10 @@ let expandedDays = $state([]);
 function toggleDayExpand(ms) {
   expandedDays = expandedDays.includes(ms) ? expandedDays.filter((m) => m !== ms) : [...expandedDays, ms];
 }
+let expandedPast = $state([]);
+function togglePastExpand(ms) {
+  expandedPast = expandedPast.includes(ms) ? expandedPast.filter((m) => m !== ms) : [...expandedPast, ms];
+}
 const fmt = (d) => fmtTime(d, locale);
 const eta = (ms) => timeUntilMs(ms, clock.tick, L);
 const prog = (ev) => progress(ev, clock.tick);
@@ -178,6 +182,59 @@ const weekDays = $derived.by(() => {
 	</button>
 {/snippet}
 
+<!-- ═══ Shared compact row snippet ═══ -->
+{#snippet compactRow(ev: TimelineEvent, showLoc: boolean, done: boolean)}
+	<button
+		type="button"
+		class="ag-compact"
+		class:ag-compact--selected={selectedEventId === ev.id}
+		class:ag-compact--done={done}
+		class:ag-compact--cancelled={ev.status === 'cancelled'}
+		class:ag-compact--tentative={ev.status === 'tentative'}
+		class:ag-compact--full={ev.status === 'full'}
+		class:ag-compact--limited={ev.status === 'limited'}
+		style:--ev-color={ev.color || 'var(--dt-accent)'}
+		aria-label="{ev.title}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
+		onclick={() => handleClick(ev)}
+		onpointerenter={() => oneventhover?.(ev)}
+	>
+		<EventContent event={ev}>
+		<span class="ag-compact-dot"></span>
+		<span class="ag-compact-time">{fmt(ev.start)}</span>
+		<div class="ag-compact-main">
+			<span class="ag-compact-title">{ev.title}</span>
+			{#if showLoc && ev.location}
+				<span class="ag-compact-loc">{ev.location}</span>
+			{/if}
+			{#if ev.subtitle}
+				<span class="ag-compact-sub">{ev.subtitle}</span>
+			{/if}
+			{#if ev.tags?.length}
+				{#each ev.tags as tag}
+					<span class="ag-compact-tag">{tag}</span>
+				{/each}
+			{/if}
+		</div>
+		<span class="ag-compact-dur">{duration(ev)}</span>
+		</EventContent>
+	</button>
+{/snippet}
+
+<!-- ═══ "✓ N completed" disclosure toggle ═══ -->
+{#snippet pastToggle(ms: number, count: number, summary: boolean)}
+	{@const open = expandedPast.includes(ms)}
+	<button
+		type="button"
+		class="ag-wday-past-line ag-past-toggle"
+		class:ag-wday-past-line--summary={summary}
+		aria-expanded={open}
+		onclick={() => togglePastExpand(ms)}
+	>
+		✓ {L.nCompleted(count)}
+		<svg class="ag-past-chevron" class:ag-past-chevron--open={open} viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+	</button>
+{/snippet}
+
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="ag ag--week"
@@ -207,7 +264,14 @@ const weekDays = $derived.by(() => {
 						{/if}
 					</div>
 					{#if day.timedEvents.length > 0}
-						<div class="ag-wday-past-line ag-wday-past-line--summary">✓ {L.nCompleted(day.timedEvents.length)}</div>
+						{@render pastToggle(day.ms, day.timedEvents.length, true)}
+						{#if expandedPast.includes(day.ms)}
+							<div class="ag-wday-compact">
+								{#each day.timedEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							</div>
+						{/if}
 					{:else if day.events.length === 0}
 						<div class="ag-wday-past-line ag-wday-past-line--summary">{L.noEvents}</div>
 					{/if}
@@ -269,34 +333,7 @@ const weekDays = $derived.by(() => {
 					<!-- Compact: minimal dot + time + title rows for all days -->
 					<div class="ag-wday-compact">
 						{#each day.timedEvents as ev (ev.id)}
-							<button
-								type="button"
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}
-								onpointerenter={() => oneventhover?.(ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</button>
+							{@render compactRow(ev, false, false)}
 						{/each}
 					</div>
 				{:else if equalDays}
@@ -337,7 +374,12 @@ const weekDays = $derived.by(() => {
 							</div>
 						{/each}
 						{#if day.pastEvents.length > 0}
-							<div class="ag-wday-past-line">✓ {L.nCompleted(day.pastEvents.length)}</div>
+							{@render pastToggle(day.ms, day.pastEvents.length, false)}
+							{#if expandedPast.includes(day.ms)}
+								{#each day.pastEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							{/if}
 						{/if}
 					</div>
 				{:else}
@@ -345,37 +387,7 @@ const weekDays = $derived.by(() => {
 					{@const dayExpanded = expandedDays.includes(day.ms)}
 					<div class="ag-wday-compact">
 						{#each (dayExpanded ? day.timedEvents : day.timedEvents.slice(0, 4)) as ev (ev.id)}
-							<button
-								type="button"
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}
-								onpointerenter={() => oneventhover?.(ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.location}
-									<span class="ag-compact-loc">{ev.location}</span>
-								{/if}
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</button>
+							{@render compactRow(ev, true, false)}
 						{/each}
 						{#if day.timedEvents.length > 4}
 							<button
@@ -421,7 +433,8 @@ const weekDays = $derived.by(() => {
 	.ag-card,
 	.ag-allday-chip,
 	.ag-compact,
-	.ag-compact-more {
+	.ag-compact-more,
+	.ag-past-toggle {
 		font: inherit;
 		color: inherit;
 		text-align: left;
@@ -439,10 +452,15 @@ const weekDays = $derived.by(() => {
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;
-		padding-top: 8px;
+		/* No padding-top here: the sticky day headers pin at the scrollport
+		   edge, and container padding would leave a see-through band above
+		   them where scrolled cards bleed out. */
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
 	}
+	.ag-wday:first-child .ag-wday-head {
+		padding-top: 12px;
+	}
 	.ag--auto .ag-body {
 		overflow-y: visible;
 	}
@@ -678,6 +696,10 @@ const weekDays = $derived.by(() => {
 		top: 0;
 		background: var(--dt-bg, #fff);
 		z-index: 1;
+		/* Own compositor layer: without it, fast (async) scrolling repaints
+		   the pinned header a frame late and a gap flashes above it. */
+		transform: translateZ(0);
+		will-change: transform;
 	}
 	.ag-wday-head-left {
 		display: flex;
@@ -759,6 +781,42 @@ const weekDays = $derived.by(() => {
 	.ag-wday-past-line--summary {
 		padding: 0 20px 8px;
 	}
+	/* "✓ N completed" is a disclosure — tap to reveal the finished events */
+	.ag-past-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+		min-height: 32px;
+		transition: color 150ms;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.ag-past-toggle:hover,
+	.ag-past-toggle:active {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+	.ag-past-toggle:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		border-radius: 4px;
+	}
+	.ag-past-chevron {
+		transition: transform 120ms;
+	}
+	.ag-past-chevron--open {
+		transform: rotate(180deg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ag-past-chevron { transition: none; }
+	}
+	/* Revealed completed events: dim + strike, single token layer */
+	.ag-compact--done .ag-compact-title {
+		text-decoration: line-through;
+		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+	}
+	.ag-compact--done .ag-compact-dot {
+		opacity: 0.5;
+	}
 
 	/* Compact day events */
 	.ag-wday-compact {
@@ -776,8 +834,13 @@ const weekDays = $derived.by(() => {
 	.ag-compact--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
+		/* Highlight gutter comes from negative margins so the row's content
+		   stays aligned with its unselected siblings (no tap-shift). */
 		padding-left: 6px;
 		padding-right: 6px;
+		margin-left: -6px;
+		margin-right: -6px;
+		width: calc(100% + 12px);
 	}
 	.ag-compact:hover .ag-compact-title,
 	.ag-compact:active .ag-compact-title {
@@ -809,12 +872,45 @@ const weekDays = $derived.by(() => {
 		white-space: nowrap;
 		line-height: 1.4;
 	}
+	/* Title + location + subtitle + tags cluster. One line while it fits; on
+	   mobile the metadata wraps to a second line instead of crushing the title. */
+	.ag-compact-main {
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+	}
+	.ag--mobile .ag-compact-main {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	/* Mobile: size the title by its content when deciding line breaks — a long
+	   title claims the first line whole (ellipsizing only against the full row)
+	   and pushes location/subtitle/tags down instead of truncating at 35%. */
+	.ag--mobile .ag-compact-title {
+		flex-basis: auto;
+	}
+	/* On their own wrapped line the metadata gets the full width — the tight
+	   desktop caps would truncate it beside empty space. */
+	.ag--mobile .ag-compact-loc,
+	.ag--mobile .ag-compact-sub {
+		max-width: 100%;
+	}
+	/* Wrapped rows are two/three lines tall — center-aligning the dot floats
+	   it between lines; pin it optically to the first (title) line instead. */
+	.ag--mobile .ag-compact-dot {
+		align-self: flex-start;
+		margin-top: 8px;
+	}
 	.ag-compact-title {
 		font-size: 12px;
 		font-weight: 500;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex: 1;
-		min-width: 0;
+		/* The title is the row's identity — never let subtitle/tags/duration
+		   squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
+		min-width: 35%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -832,7 +928,8 @@ const weekDays = $derived.by(() => {
 	.ag-compact-sub {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -842,7 +939,8 @@ const weekDays = $derived.by(() => {
 	.ag-compact-loc {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -870,7 +968,8 @@ const weekDays = $derived.by(() => {
 		padding: 1px 4px;
 		border-radius: 3px;
 		white-space: nowrap;
-		flex-shrink: 0;
+		flex-shrink: 1;
+		min-width: 2.5em;
 		max-width: 80px;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/dist/views/mobile/MobileDay.svelte

@@ -398,6 +398,7 @@ $effect(() => {
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div
 		class="mb-swipe"
@@ -504,17 +505,20 @@ $effect(() => {
 						<div class="mb-ev-stripe"></div>
 						<div class="mb-ev-body">
 							<EventContent event={p.ev}>
+							<!-- Line thresholds must track real content height (title 18 +
+							     time 13 + sub 14 + loc 12 + tags 19 + padding 8) — showing
+							     a line the block can't hold clips text at both ends. -->
 							<span class="mb-ev-title">{p.ev.title}</span>
 							{#if p.height > 32}
 								<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 							{/if}
-							{#if p.ev.subtitle && p.height > 48}
+							{#if p.ev.subtitle && p.height > 56}
 								<span class="mb-ev-sub">{p.ev.subtitle}</span>
 							{/if}
-							{#if p.ev.location && p.height > 56}
+							{#if p.ev.location && p.height > 72}
 								<span class="mb-ev-loc">{p.ev.location}</span>
 							{/if}
-							{#if p.ev.tags?.length && p.height > 56}
+							{#if p.ev.tags?.length && p.height > 88}
 								<div class="mb-ev-tags">
 									{#each p.ev.tags as tag}
 										<span class="mb-ev-tag">{tag}</span>
@@ -751,6 +755,9 @@ $effect(() => {
 
 	.mb-hour-label {
 		width: 40px;
+		/* border-box keeps the label inside the 40px gutter that events
+		   start at — content-box pushed digits flush under the event edge */
+		box-sizing: border-box;
 		flex-shrink: 0;
 		font: 500 11px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
@@ -801,6 +808,7 @@ $effect(() => {
 
 	.mb-now-label {
 		width: 40px;
+		box-sizing: border-box;
 		flex-shrink: 0;
 		text-align: right;
 		padding-right: 6px;

package/dist/views/mobile/MobileWeek.svelte

@@ -143,6 +143,7 @@ function handleDayKeydown(e, dayMs) {
 	ontouchstart={swipe.ontouchstart}
 	ontouchmove={swipe.ontouchmove}
 	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<!-- Vertical day list -->
 	<div
@@ -251,6 +252,7 @@ function handleDayKeydown(e, dayMs) {
 	.mw-list {
 		flex: 1;
 		overflow-y: auto;
+		overflow-x: hidden;
 		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
@@ -270,6 +272,10 @@ function handleDayKeydown(e, dayMs) {
 		align-items: center;
 		gap: 12px;
 		position: relative;
+		/* border-box: width 100% + padding otherwise overflows the list by
+		   24px, which iOS turns into a horizontal pan that clips the date
+		   column off the left edge */
+		box-sizing: border-box;
 		padding: 10px 12px;
 		background: transparent;
 		transition: background 120ms;

package/dist/views/mobile/swipe.d.ts

@@ -24,5 +24,6 @@ export interface SwipeHandlers {
     ontouchstart: (e: TouchEvent) => void;
     ontouchmove: (e: TouchEvent) => void;
     ontouchend: () => void;
+    ontouchcancel: () => void;
 }
 export declare function createSwipe(cb: SwipeCallbacks): SwipeHandlers;

package/dist/views/mobile/swipe.js

@@ -60,5 +60,14 @@ export function createSwipe(cb) {
             dx = 0;
             cb.onend(dir);
         },
+        ontouchcancel() {
+            // The browser took over the gesture (scroll, edge-swipe, system UI).
+            // Without this, the view stays stuck at the last swipe offset.
+            if (!tracking)
+                return;
+            tracking = false;
+            dx = 0;
+            cb.onend(0);
+        },
     };
 }