From 2ab02fd1c908669162b928e715e15acae85f4712 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 22:57:27 +0300
Subject: [PATCH] web/components: fix CommitLogView layout shift

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/repo/CommitLogView.svelte  | 54 +++++++++----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index bfba1bf6..e60b0f88 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -61,9 +61,9 @@
 	<a
 		href={resolve(`${base}/commit/${commit.hash}` as "/")}
 		title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-		class="flex items-center gap-2 rounded bg-background-inset px-2 {mobile
+		class="flex items-center gap-2 rounded-sm bg-background-inset px-2 {mobile
 			? 'py-1'
-			: 'py-0.5'} text-foreground-muted no-underline hover:underline"
+			: 'py-0.5'} no-underline hover:underline"
 	>
 		{commit.shortHash}
 	</a>
@@ -72,7 +72,7 @@
 {#snippet treeLink(commit: CommitSummary)}
 	<a
 		href={resolve(`${base}/tree/${commit.hash}` as "/")}
-		class="rounded p-1 hover:bg-background-inset"
+		class="rounded-sm p-1 hover:bg-background-inset"
 		title="Browse repository at this commit"
 		aria-label="Browse repository at this commit"
 	>
@@ -83,7 +83,7 @@
 {#snippet copyButton(commit: CommitSummary)}
 	<button
 		type="button"
-		class="cursor-pointer rounded p-1 hover:bg-background-inset"
+		class="cursor-pointer rounded-sm p-1 hover:bg-background-inset"
 		title="Copy SHA"
 		aria-label="Copy SHA"
 		onclick={() => void copyFeedback.copy(commit.hash)}
@@ -98,20 +98,13 @@
 
 {#snippet pipelineCell(commit: CommitSummary)}
 	{#if pipelineStatuses}
-		{#await pipelineStatuses then statuses}
-			{#if statuses[commit.hash]}
-				<!-- the column is a couple of glyphs wide, so the tally stays in the dropdown
-				     and in the trigger's own aria-label -->
-				<PipelineWorkflows
-					{ownerHandle}
-					{repoName}
-					pipeline={statuses[commit.hash]}
-					variant="symbol"
-					summary="none"
-					size="mini"
-				/>
-			{/if}
-		{/await}
+		<span class="flex min-h-9 items-center">
+			{#await pipelineStatuses then statuses}
+				{#if statuses[commit.hash]}
+					<PipelineWorkflows {ownerHandle} {repoName} pipeline={statuses[commit.hash]} />
+				{/if}
+			{/await}
+		</span>
 	{/if}
 {/snippet}
 
@@ -126,7 +119,7 @@
 		{#if commit.body}
 			<button
 				type="button"
-				class="cursor-pointer rounded bg-background-inset px-1 py-0.5 hover:bg-background-muted"
+				class="cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 hover:bg-background-muted"
 				aria-expanded={expanded[commit.hash] === true}
 				aria-label="Toggle commit body"
 				onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
@@ -145,14 +138,17 @@
 	{/if}
 {/snippet}
 
-<section id="commit-table" class="overflow-x-auto rounded bg-background-default px-6 py-4">
+<section
+	id="commit-table"
+	class="overflow-x-auto rounded-sm border border-border-default bg-background-default px-6 py-4"
+>
 	<h2 class="mb-4 typography-paragraph-regular font-bold">Commits</h2>
 
 	{#if commits.length === 0}
 		<p class="py-6 text-center text-foreground-subtle">No commits at {ref}.</p>
 	{:else}
 		<div class="hidden divide-y divide-border-default md:flex md:flex-col">
-			<div class="grid grid-cols-15 gap-4">
+			<div class="grid grid-cols-16 gap-4">
 				<div
 					class="col-span-3 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
@@ -164,14 +160,14 @@
 					Commit
 				</div>
 				<div
-					class="col-span-6 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+					class="col-span-7 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
 					Message
 				</div>
-				<div class="col-span-1 py-2">
-					<!-- the symbols speak for themselves, so the header only labels the column
-					     for screen readers, and its width stays reserved either way -->
-					<span class="sr-only">Pipeline</span>
+				<div
+					class="col-span-1 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+				>
+					<span>Pipeline</span>
 				</div>
 				<div
 					class="col-span-2 justify-self-end py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
@@ -180,7 +176,7 @@
 				</div>
 			</div>
 			{#each commits as commit (commit.hash)}
-				<div class="grid grid-cols-15 gap-4 py-3">
+				<div class="grid grid-cols-16 gap-4 py-3">
 					<div class="col-span-3 align-top">
 						{@render authorCell(commit)}
 					</div>
@@ -194,7 +190,7 @@
 							{@render treeLink(commit)}
 						</div>
 					</div>
-					<div class="col-span-6 align-top">
+					<div class="col-span-7 align-top">
 						{@render messageCell(commit)}
 					</div>
 					<div class="col-span-1 flex items-start align-top">
@@ -230,7 +226,7 @@
 						{@render authorCell(commit)}
 						{#if commit.when}
 							<span aria-hidden="true">&middot;</span>
-							<TimeAgo value={commit.when} />
+							<TimeAgo value={commit.when} class="shrink-0 whitespace-nowrap" />
 						{/if}
 						{@render pipelineCell(commit)}
 					</div>
-- 
2.51.2