From f602e08b5a106b2720aacaf2a14d8a6c10f2c8b8 Mon Sep 17 00:00:00 2001
From: Andreas Schneider <aksdb@gmx.de>
Date: Fri, 1 May 2026 13:29:07 +0200
Subject: [PATCH] feat: responsive day chips via CSS container queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 130 +++++++++++++++++++-------
 web/src/routes/week/+page.svelte      |  14 ++-
 2 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/web/src/lib/components/DayChip.svelte b/web/src/lib/components/DayChip.svelte
index 0fe0c18..f1bed3d 100644
--- a/web/src/lib/components/DayChip.svelte
+++ b/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,39 +42,56 @@
 	};
 </script>
 
-<button
-	class="day-chip"
-	class:today={isToday}
-	class:selected
-	class:weekend={!isWorkday}
-	class:closed
-	role="tab"
-	aria-selected={selected}
-	tabindex={selected ? 0 : -1}
-	{onclick}
->
-	<span class="wd-label">{weekdayLabel}</span>
-	<span class="date-num">{dateNum}</span>
+<!-- container query context wraps the button -->
+<div class="chip-wrap">
+	<button
+		class="day-chip"
+		class:today={isToday}
+		class:selected
+		class:weekend={!isWorkday}
+		class:closed
+		role="tab"
+		aria-selected={selected}
+		tabindex={selected ? 0 : -1}
+		{onclick}
+	>
+		<span class="wd-label">{weekdayLabel}</span>
+		<span class="date-num">{dateNum}</span>
 
-	{#if expectedMs > 0}
-		<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
-			<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
+		{#if expectedMs > 0}
+			<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
+				<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
+			</div>
+		{:else}
+			<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>
+			{/if}
+			{#if closed}
+				<span class="closed-badge" title="Closed">✓</span>
+			{/if}
 		</div>
-	{:else}
-		<div class="progress-track weekend-track"></div>
-	{/if}
-
-	<div class="badges">
-		{#if kind && kind !== 'work'}
-			<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
-		{/if}
-		{#if closed}
-			<span class="closed-badge" title="Closed">✓</span>
-		{/if}
-	</div>
-</button>
+	</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;
-		flex: 1;
+		width: 100%;
 		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;
diff --git a/web/src/routes/week/+page.svelte b/web/src/routes/week/+page.svelte
index 7027fa5..790d49c 100644
--- a/web/src/routes/week/+page.svelte
+++ b/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; }