diff --git a/frontend/src/lib/timeline/TagChip.svelte b/frontend/src/lib/timeline/TagChip.svelte
index 914c964d..1cceecc9 100644
--- a/frontend/src/lib/timeline/TagChip.svelte
+++ b/frontend/src/lib/timeline/TagChip.svelte
@@ -23,22 +23,19 @@ const squareStyle = $derived(color ? `background-color: var(--c-tag-${color})` :
 	class="mt-1 self-start rounded-full border border-line bg-surface px-2 py-0.5"
 >
 	<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
-	{#if color}
-		<span
-			data-testid="tag-chip-square"
-			aria-hidden="true"
-			style={squareStyle}
-			class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
-		></span>
-	{:else}
-		<span
-			data-testid="tag-chip-square"
-			aria-hidden="true"
-			class="inline-block h-2 w-2 flex-shrink-0 rounded-sm bg-ink-3"
-		></span>
-	{/if}
+	<!-- One marker for both states: a set color paints it via squareStyle; a null color leaves
+	     squareStyle empty and falls back to the neutral bg-ink-3 (no var(--c-tag-) reference). -->
+	<span
+		data-testid="tag-chip-square"
+		aria-hidden="true"
+		style={squareStyle}
+		class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
+		class:bg-ink-3={!color}
+	></span>
+	<!-- Overflow/ellipsis set inline (not via Tailwind's `truncate`) so the name ellipsizes even
+	     before the stylesheet loads, keeping the card overflow-free at 320px (REQ-008a). -->
 	<span
 		style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
-		class="truncate font-sans text-[11px] text-ink-2">{name}</span
+		class="font-sans text-[11px] text-ink-2">{name}</span
 	>
 </span>