diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 64db1b8aa..9a7acb3ff 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -81,7 +81,7 @@
 							<PipelineWorkflows
 								{ownerHandle}
 								{repoName}
-								size="small"
+								size="mini"
 								pipeline={statuses[commit.hash]}
 								variant="symbol"
 							/>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
index 03f706d98..17f5c1df3 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCard.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
@@ -18,13 +18,13 @@
 		ownerHandle,
 		repoName,
 		pipeline,
-		border = true,
+		border = false,
 		shadow = false,
-		background = true,
+		background = false,
 		forkLabels
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background} padding="small" class="pt-5.5 pr-4 pl-2">
+<Card {border} {shadow} {background} padding="none" class="pb-4 pt-5.5 pr-4 pl-2 rounded-none md:flex md:flex-row md:items-center md:justify-between">
 	<PipelineCardContent {ownerHandle} {repoName} {pipeline} {forkLabels} />
 </Card>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index 06d4a92fc..a1f8d61b8 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -5,7 +5,7 @@
 		slots: {
 			// does not wrap: a long branch name wraps inside the trigger group instead, so the
 			// sha stays pinned top-right
-			header: "flex items-start justify-between gap-3 pb-2",
+			header: "flex items-start justify-between gap-3 pb-2 md:pb-0",
 			trigger: "ml-4 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
 			triggerRow: "flex flex-wrap items-center gap-x-1.5 gap-y-1 text-foreground-default",
 			triggerIcon: "size-4 shrink-0 text-foreground-muted",
@@ -139,19 +139,19 @@
 <div class={classes.meta()}>
 	<span class={classes.metaSub()}>
 		<span class={classes.workflows()} title={longSummary(pipeline) || undefined}>
-			<PipelineWorkflows chevron={true} {ownerHandle} {repoName} {pipeline} />
+			<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
 		</span>
 	</span>
 
 	<span class={classes.metaSub()}>
-		<TimeAgo value={pipeline.createdAt} />
-
 		{#if duration > 0}
-			<Separator variant="dot" />
 			<span class={classes.duration()}>
 				<Clock class={classes.durationIcon()} aria-hidden="true" />
 				{formatDuration(duration)}
 			</span>
+			<Separator variant="dot" />
 		{/if}
+
+		<TimeAgo value={pipeline.createdAt} />
 	</span>
 </div>
diff --git a/web/src/lib/components/repo/pipelines/PipelineList.svelte b/web/src/lib/components/repo/pipelines/PipelineList.svelte
index 3e0dc345b..182242276 100644
--- a/web/src/lib/components/repo/pipelines/PipelineList.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineList.svelte
@@ -18,7 +18,7 @@
 </script>
 
 {#if pipelines.length > 0}
-	<div class="flex flex-col gap-2">
+	<div class="flex flex-col divide-y divide-border-default bg-background-default border border-border-default rounded-sm">
 		{#each pipelines as pipeline (pipeline.id)}
 			<PipelineCard {ownerHandle} {repoName} {pipeline} {forkLabels} />
 		{/each}