From a8acb5404c2e6c3e39a60b1aafae1ee8a9f3b06a Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 4 Sep 2026 14:32:10 +0200
Subject: [PATCH] web/pipelines: make PipelineSymbol icon size follow parent
 size & other visual nits

Signed-off-by: eti <eti@eti.tf>
Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/components/repo/CommitList.svelte |  6 +--
 .../repo/pipelines/PipelineCard.svelte        |  2 +-
 .../repo/pipelines/PipelineCardContent.svelte |  4 +-
 .../repo/pipelines/PipelineStatusIcon.svelte  | 17 +++++++--
 .../repo/pipelines/PipelineSymbol.svelte      | 32 +++++++++-------
 .../repo/pipelines/PipelineWorkflows.svelte   | 14 +++----
 .../repo/pipelines/WorkflowSidebar.svelte     |  2 +-
 web/src/lib/components/ui/Button.svelte       | 37 ++++++++++++++++---
 8 files changed, 78 insertions(+), 36 deletions(-)

diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 8ef53fb2a..e894c46b6 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -27,7 +27,7 @@
 <div class="flex flex-col gap-4">
 	{#each commits as commit (commit.hash)}
 		<div>
-			<div class="flex items-start gap-1">
+			<span>
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
 					class="no-underline hover:underline"
@@ -37,7 +37,7 @@
 				{#if commit.body}
 					<button
 						type="button"
-						class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
+						class="shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 hover:bg-background-muted"
 						aria-expanded={expanded[commit.hash] === true}
 						aria-label="Toggle commit body"
 						onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
@@ -45,7 +45,7 @@
 						<Ellipsis class="size-3" aria-hidden="true" />
 					</button>
 				{/if}
-			</div>
+			</span>
 
 			{#if commit.body && expanded[commit.hash]}
 				<p
diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
index 338ca01f8..0ab3c1b78 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCard.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
@@ -33,7 +33,7 @@
 	{shadow}
 	{background}
 	padding="small"
-	class="md:flex md:flex-row md:items-center md:justify-between"
+	class="px-4 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 0aa4f725c..0f9bf95a1 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -4,13 +4,13 @@
 	export const pipelineCardContent = tv({
 		slots: {
 			header: "flex items-start justify-between gap-3 pb-2 md:pb-0",
-			trigger: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
+			trigger: "flex min-w-0 flex-wrap items-center gap-x-2 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",
 			triggerVerb: "text-foreground-muted",
 			triggerRef: "font-semibold",
 			triggerArrow: "size-3 shrink-0 text-foreground-muted",
-			sha: "shrink-0 rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline",
+			sha: "shrink-0 self-center rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline",
 			meta: "flex flex-wrap items-center justify-between text-foreground-muted",
 			metaSub: "mr-2 flex flex-wrap items-center gap-2",
 			workflows: "",
diff --git a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
index f2dd324e9..a39a7e181 100644
--- a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
@@ -20,7 +20,6 @@
 	};
 
 	export const pipelineStatusIcon = tv({
-		base: "size-3 shrink-0",
 		variants: {
 			status: {
 				pending: "text-foreground-muted",
@@ -37,17 +36,29 @@
 </script>
 
 <script lang="ts">
+	import {
+		buttonIcon,
+		getButtonIconSize,
+		type ButtonIconVariants
+	} from "$lib/components/ui/Button.svelte";
+
 	interface Props {
 		status: PipelineStatus;
 		colored?: boolean;
 		class?: string;
+		size?: ButtonIconVariants["size"];
 	}
 
-	let { status, colored = false, class: className }: Props = $props();
+	let { status, colored = false, class: className, size }: Props = $props();
+
+	const inheritedSize = getButtonIconSize();
 
 	const Icon = $derived(STATUS_ICONS[status]);
 	const classes = $derived(
-		pipelineStatusIcon({ status: colored ? status : undefined, class: className })
+		pipelineStatusIcon({
+			status: colored ? status : undefined,
+			class: [buttonIcon({ size: size ?? inheritedSize?.() }), className]
+		})
 	);
 </script>
 
diff --git a/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
index 6d70a1326..548024171 100644
--- a/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
@@ -2,7 +2,6 @@
 	import { tv } from "tailwind-variants";
 	import type { PipelineStatus } from "$lib/components/repo/types";
 
-	// must match STATUS_STROKES to PipelineStatusIcon's colours or the ring/icon disagree
 	export const STATUS_STROKES: Record<PipelineStatus, string> = {
 		pending: "stroke-foreground-placeholder",
 		running: "stroke-foreground-warning",
@@ -14,10 +13,8 @@
 
 	export const pipelineSymbol = tv({
 		slots: {
-			icon: "size-4 shrink-0",
-			waiting: "size-4 shrink-0 text-foreground-muted",
-			// -rotate-90 puts the first arc at twelve o'clock instead of three
-			ring: "size-4 shrink-0 -rotate-90"
+			waiting: "text-foreground-muted",
+			ring: "-rotate-90"
 		}
 	});
 
@@ -30,13 +27,22 @@
 	import type { PipelineSummary } from "$lib/components/repo/types";
 	import { statusCounts, STATUS_ORDER } from "$lib/components/repo/pipelines/pipeline";
 	import PipelineStatusIcon from "$lib/components/repo/pipelines/PipelineStatusIcon.svelte";
+	import {
+		buttonIcon,
+		getButtonIconSize,
+		type ButtonIconVariants
+	} from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		pipeline: PipelineSummary;
 		class?: string;
+		size?: ButtonIconVariants["size"];
 	}
 
-	let { pipeline, class: className }: Props = $props();
+	let { pipeline, class: className, size }: Props = $props();
+
+	const inheritedSize = getButtonIconSize();
+	const iconClasses = $derived(buttonIcon({ size: size ?? inheritedSize?.() }));
 
 	const arcs = $derived.by(() => {
 		const counts = statusCounts(pipeline);
@@ -54,15 +60,15 @@
 </script>
 
 {#if arcs.length === 0}
-	<Hourglass class={classes.waiting({ class: className })} aria-hidden="true" />
+	<Hourglass class={classes.waiting({ class: [iconClasses, className] })} aria-hidden="true" />
 {:else if arcs.length === 1}
-	<PipelineStatusIcon
-		status={arcs[0].status}
-		colored
-		class={classes.icon({ class: className })}
-	/>
+	<PipelineStatusIcon status={arcs[0].status} colored {size} class={className} />
 {:else}
-	<svg class={classes.ring({ class: className })} viewBox="0 0 20 20" aria-hidden="true">
+	<svg
+		class={classes.ring({ class: [iconClasses, className] })}
+		viewBox="0 0 20 20"
+		aria-hidden="true"
+	>
 		{#each arcs as arc (arc.status)}
 			<circle
 				cx="10"
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 5f5da9c5e..5d64ce7da 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -7,8 +7,6 @@
 			waiting: "pl-2.5",
 			waitingSymbol: "animate-spin-step",
 			trigger: "flex items-center gap-2",
-			icon: "size-3 shrink-0",
-			symbol: "",
 			item: "[&>span]:w-full",
 			row: "flex w-full items-center justify-between gap-2",
 			name: "flex min-w-0 items-center gap-1.5",
@@ -18,7 +16,7 @@
 		},
 		variants: {
 			variant: {
-				count: { symbol: "size-4" },
+				count: {},
 				symbol: { trigger: "gap-1.5" }
 			}
 		},
@@ -43,7 +41,7 @@
 	import PipelineStatusIcon from "$lib/components/repo/pipelines/PipelineStatusIcon.svelte";
 	import PipelineSymbol from "$lib/components/repo/pipelines/PipelineSymbol.svelte";
 	import ShimmerText from "$lib/components/ui/ShimmerText.svelte";
-	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon, type ButtonVariants } from "$lib/components/ui/Button.svelte";
 	import Link from "$lib/components/ui/Link.svelte";
 	import { resolve } from "$app/paths";
 	import type { Component } from "svelte";
@@ -83,9 +81,9 @@
 
 {#snippet body()}
 	{#if Icon}
-		<Icon class="size-3 {iconClass}" aria-hidden="true" />
+		<Icon class={buttonIcon({ size, class: iconClass })} aria-hidden="true" />
 	{/if}
-	<PipelineSymbol {pipeline} class={classes.symbol()} />
+	<PipelineSymbol {pipeline} {size} />
 	{#if summary !== "none"}
 		<span class={classes.status()}>
 			{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
@@ -100,7 +98,7 @@
 				class={classes.trigger()}
 				title={variant === "symbol" ? "Waiting for a spindle" : undefined}
 			>
-				<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
+				<PipelineSymbol {pipeline} {size} class={classes.waitingSymbol()} />
 				{#if variant === "count"}
 					<span class={classes.status()}>Waiting…</span>
 				{/if}
@@ -113,7 +111,7 @@
 				title={variant === "symbol" ? "Waiting for a spindle" : undefined}
 				{size}
 			>
-				<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
+				<PipelineSymbol {pipeline} {size} class={classes.waitingSymbol()} />
 				{#if variant === "count"}
 					<span class={classes.status()}>Waiting…</span>
 				{/if}
diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
index 0c0969367..89f4d054b 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
@@ -88,7 +88,7 @@
 	</div>
 	<div class={classes().bottom()}>
 		<div class={classes().status()}>
-			<PipelineStatusIcon status={workflow.status} colored class="size-4" />
+			<PipelineStatusIcon status={workflow.status} colored />
 			<span class={classes().label()}>{STATUS_LABELS[workflow.status]}</span>
 		</div>
 		{#if workflow.duration > 0}
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 55276d994..8ea2e347f 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import { getContext, setContext } from "svelte";
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const button = tv({
@@ -89,7 +90,31 @@
 		}
 	});
 
+	export const buttonIcon = tv({
+		base: "shrink-0",
+		variants: {
+			size: {
+				mini: "size-3.5",
+				small: "size-4",
+				regular: "size-4",
+				large: "size-5"
+			}
+		},
+		defaultVariants: {
+			size: "regular"
+		}
+	});
+
 	export type ButtonVariants = VariantProps<typeof button>;
+	export type ButtonIconVariants = VariantProps<typeof buttonIcon>;
+
+	const BUTTON_ICON_SIZE = Symbol("button-icon-size");
+
+	export const setButtonIconSize = (size: () => ButtonIconVariants["size"]) =>
+		setContext(BUTTON_ICON_SIZE, size);
+
+	export const getButtonIconSize = () =>
+		getContext<(() => ButtonIconVariants["size"]) | undefined>(BUTTON_ICON_SIZE);
 </script>
 
 <script lang="ts">
@@ -139,9 +164,11 @@
 	}: Props = $props();
 
 	const classes = $derived(button({ variant, size, insetShadow, class: className }));
-	const spinnerSize = $derived(spinnerClass ?? (size === "large" ? "size-5" : "size-4"));
-	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
+	const spinnerClasses = $derived(buttonIcon({ size, class: spinnerClass }));
+	const iconClasses = $derived(buttonIcon({ size }));
 	const Icon = $derived(icon);
+
+	setButtonIconSize(() => size);
 </script>
 
 {#snippet content()}
@@ -150,16 +177,16 @@
 		class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
 	>
 		{#if loading}
-			<Spinner class={spinnerSize} />
+			<Spinner class={spinnerClasses} />
 		{:else}
 			{#if Icon && iconSide == "left"}
-				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+				<Icon class={iconClasses} aria-hidden="true" />
 			{/if}
 			{#if children}
 				{@render children()}
 			{/if}
 			{#if Icon && iconSide == "right"}
-				<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+				<Icon class={iconClasses} aria-hidden="true" />
 			{/if}
 		{/if}
 	</span>
-- 
2.54.0