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>
This commit is contained in:
@@ -140,12 +140,14 @@ function safeTagColor(color: string | null | undefined): string {
|
|||||||
<div>
|
<div>
|
||||||
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
|
{doc.documentDate ? formatDate(doc.documentDate) : '—'}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-start gap-2">
|
||||||
<ProgressRing percentage={item.completionPercentage} />
|
<ProgressRing percentage={item.completionPercentage} />
|
||||||
|
<div class="flex h-9 items-center">
|
||||||
<ContributorStack contributors={item.contributors} hasMore={hasMore} />
|
<ContributorStack contributors={item.contributors} hasMore={hasMore} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Right column — desktop only -->
|
<!-- Right column — desktop only -->
|
||||||
<div class="hidden flex-col gap-2 pl-4 font-sans text-xs text-ink-2 sm:flex sm:w-44 lg:w-56">
|
<div class="hidden flex-col gap-2 pl-4 font-sans text-xs text-ink-2 sm:flex sm:w-44 lg:w-56">
|
||||||
@@ -172,11 +174,13 @@ function safeTagColor(color: string | null | undefined): string {
|
|||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-start gap-2">
|
||||||
<ProgressRing percentage={item.completionPercentage} />
|
<ProgressRing percentage={item.completionPercentage} />
|
||||||
|
<div class="flex h-9 items-center">
|
||||||
<ContributorStack contributors={item.contributors} hasMore={hasMore} />
|
<ContributorStack contributors={item.contributors} hasMore={hasMore} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user