From dff282fc4822d47ecb8e6765e2c705e018fb11f4 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Tue, 9 Jun 2026 14:57:03 +0200
Subject: [PATCH] ui(drafts): nest user-initial circles inside the Draft badge

Previously the circles sat alongside the Badge in a parent flex
container; the result read as two separate UI elements. The Badge
component already exposes its children as a snippet rendered inside
its own flex row, so moving the circles into it makes them feel like
part of the same chip.

Knock-on tweaks: shrunk the circles from h-4/w-4 to h-3.5/w-3.5 so the
badge stays compact, and tinted each circle's ring with the badge's
indigo palette (instead of plain white) so the overlap reads as a
deliberate stack rather than dots floating on top of the chip.
---
 frontend/src/lib/components/DraftBadge.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/DraftBadge.svelte b/frontend/src/lib/components/DraftBadge.svelte
index 4620967ba6..4bf200b1fc 100644
--- a/frontend/src/lib/components/DraftBadge.svelte
+++ b/frontend/src/lib/components/DraftBadge.svelte
@@ -88,12 +88,16 @@
 				Is deployed and has a draft
 			{/if}
 		{/snippet}
-		<div class="flex items-center gap-1">
+		<Badge small color="indigo">
 			{#if draft_users.length > 0}
-				<div class="flex -space-x-1">
+				<!-- Circles sit inside the Badge, before the label. `-space-x-1`
+				     overlaps them slightly; each circle's ring uses the badge's
+				     indigo tint instead of plain white so the overlap reads as
+				     intentional rather than a stack-of-floating-dots. -->
+				<span class="flex -space-x-1">
 					{#each visibleUsers as u}
 						<span
-							class="inline-flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-semibold text-white ring-1 ring-white {colorFor(
+							class="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full text-[8px] font-semibold text-white ring-1 ring-indigo-100 dark:ring-indigo-700/40 {colorFor(
 								u
 							)}"
 							title={fullLabel(u)}
@@ -103,15 +107,15 @@
 					{/each}
 					{#if overflowCount > 0}
 						<span
-							class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-500 text-[8px] font-semibold text-white ring-1 ring-white"
+							class="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full bg-gray-500 text-[8px] font-semibold text-white ring-1 ring-indigo-100 dark:ring-indigo-700/40"
 							title="{overflowCount} more"
 						>
 							+{overflowCount}
 						</span>
 					{/if}
-				</div>
+				</span>
 			{/if}
-			<Badge small color="indigo">{draft_only ? 'Draft only' : 'Draft'}</Badge>
-		</div>
+			{draft_only ? 'Draft only' : 'Draft'}
+		</Badge>
 	</Popover>
 {/if}