From eb3a54b19c98e875102eb06cb2271b5613e11841 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 20 Apr 2026 09:55:50 +0200
Subject: [PATCH] fix(document-row): align contributor circles with progress
 ring

The ProgressRing renders SVG + percentage label as a flex column (~52px
total). With items-center, the contributor circles aligned to the middle
of the full block, placing them 8px below the ring center. Changed to
items-start on the container and wrapped ContributorStack in h-9 (36px =
SVG height) flex items-center so both circles center at the same 18px.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/DocumentRow.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/DocumentRow.svelte b/frontend/src/lib/components/DocumentRow.svelte
index bee37ac5..18766320 100644
--- a/frontend/src/lib/components/DocumentRow.svelte
+++ b/frontend/src/lib/components/DocumentRow.svelte
@@ -140,9 +140,11 @@ function safeTagColor(color: string | null | undefined): string {
 					<div>
 						{doc.documentDate ? formatDate(doc.documentDate) : '—'}
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex items-start gap-2">
 						<ProgressRing percentage={item.completionPercentage} />
-						<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+						<div class="flex h-9 items-center">
+							<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -172,9 +174,11 @@ function safeTagColor(color: string | null | undefined): string {
 						{/if}
 					</span>
 				</div>
-				<div class="flex items-center gap-2">
+				<div class="flex items-start gap-2">
 					<ProgressRing percentage={item.completionPercentage} />
-					<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+					<div class="flex h-9 items-center">
+						<ContributorStack contributors={item.contributors} hasMore={hasMore} />
+					</div>
 				</div>
 			</div>
 		</div>