feat: responsive day chips via CSS container queries

Wrap each DayChip in a container-query context so the chip layout
responds to the actual space available rather than the viewport width.

Breakpoints (per-chip width):
- < 72px  (mobile, 7 chips in ~320px): compact — label + date + progress bar + badges only
- ≥ 72px  (tablet+): show worked duration text below the date number; slightly larger padding/font
- ≥ 100px (desktop, 7 chips in ~750px wide main): larger date number, bigger worked label

The .chip-slot div in week/+page.svelte is the flex child (flex: 1,
min-width: 2.8rem) that feeds width into the container; .chip-wrap
inside DayChip carries container-type: inline-size and fills the slot.

web/src/lib/components/DayChip.svelte

@@ -32,6 +32,8 @@
 	// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
 	const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);
 
+	const workedLabel = $derived(workedMs > 0 ? formatDurationShort(workedMs) : null);
+
 	// Kind icons (emoji-free: text labels used for kind badges)
 	const KIND_ICON: Record<string, string> = {
 		holiday: 'H',
@@ -40,6 +42,8 @@
 	};
 </script>
 
+<!-- container query context wraps the button -->
+<div class="chip-wrap">
 	<button
 		class="day-chip"
 		class:today={isToday}
@@ -62,6 +66,11 @@
 			<div class="progress-track weekend-track"></div>
 		{/if}
 
+		<!-- shown only in wide mode via container query -->
+		{#if workedLabel}
+			<span class="worked-label">{workedLabel}</span>
+		{/if}
+
 		<div class="badges">
 			{#if kind && kind !== 'work'}
 				<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
@@ -71,8 +80,18 @@
 			{/if}
 		</div>
 	</button>
+</div>
 
 <style>
+	/* Container query context: each chip slot is the container */
+	.chip-wrap {
+		container-type: inline-size;
+		flex: 1;
+		min-width: 2.8rem;
+		scroll-snap-align: start;
+		display: flex;
+	}
+
 	.day-chip {
 		display: flex;
 		flex-direction: column;
@@ -83,10 +102,8 @@
 		border-radius: 8px;
 		background: #fff;
 		cursor: pointer;
-		min-width: 2.8rem;
+		width: 100%;
-		flex: 1;
 		transition: border-color 0.15s, box-shadow 0.15s;
-		scroll-snap-align: start;
 		font-family: inherit;
 	}
 
@@ -155,6 +172,55 @@
 		background: #f39c12;
 	}
 
+	/* Worked duration text — hidden by default, shown when chip is wide */
+	.worked-label {
+		display: none;
+		font-size: 0.7rem;
+		font-weight: 600;
+		color: #495057;
+		line-height: 1;
+	}
+
+	.weekend .worked-label {
+		color: #adb5bd;
+	}
+
+	/* Wide chip (≥ 72px): show worked duration */
+	@container (min-width: 72px) {
+		.worked-label {
+			display: block;
+		}
+
+		.day-chip {
+			padding: 0.55rem 0.5rem;
+			gap: 0.25rem;
+		}
+
+		.wd-label {
+			font-size: 0.7rem;
+		}
+
+		.date-num {
+			font-size: 1.15rem;
+		}
+	}
+
+	/* Very wide chip (≥ 100px): bigger text, more padding */
+	@container (min-width: 100px) {
+		.day-chip {
+			padding: 0.7rem 0.6rem;
+			gap: 0.3rem;
+		}
+
+		.date-num {
+			font-size: 1.3rem;
+		}
+
+		.worked-label {
+			font-size: 0.8rem;
+		}
+	}
+
 	.badges {
 		display: flex;
 		gap: 0.15rem;

web/src/routes/week/+page.svelte

@@ -202,7 +202,7 @@
 		onkeydown={handleStripKeydown}
 	>
 		{#each dayKeys as dk, i (dk)}
-			<span bind:this={chipRefs[dk]}>
+			<div class="chip-slot" bind:this={chipRefs[dk]}>
 				<DayChip
 					dayKey={dk}
 					weekdayLabel={DAY_NAMES[i]}
@@ -215,7 +215,7 @@
 					isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
 					onclick={() => selectDay(dk)}
 				/>
-			</span>
+			</div>
 		{/each}
 	</div>
 
@@ -264,6 +264,16 @@
 		scroll-snap-type: x mandatory;
 		-webkit-overflow-scrolling: touch;
 		padding-bottom: 0.25rem;
+		/* let chips grow to fill available width */
+		align-items: stretch;
+	}
+
+	/* Each slot is a flex child that stretches and provides the container
+	   query context via the .chip-wrap inside DayChip */
+	.chip-slot {
+		flex: 1;
+		min-width: 2.8rem;
+		display: flex;
 	}
 
 	.summary { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }