diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 9326eac2..2b9da6ae 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -4,7 +4,7 @@
 	export const pipelineWorkflows = tv({
 		slots: {
 			waiting: "inline-flex items-center gap-1",
-			trigger: "flex items-center gap-1 text-foreground-muted hover:underline",
+			trigger: "flex items-center gap-2",
 			icon: "size-3 shrink-0",
 			symbol: "",
 			// Button hugs its children, so stretch that span to get a two-column row
@@ -13,12 +13,12 @@
 			name: "flex min-w-0 items-center gap-1.5",
 			label: "truncate",
 			outcome: "shrink-0 text-foreground-muted",
-			status: "mt-0.5"
+			status: ""
 		},
 		variants: {
 			variant: {
 				// "2/3 workflows" with a chevron, for a card that has room to spell it out
-				count: { waiting: "italic", symbol: "size-3" },
+				count: { symbol: "size-3" },
 				// the appview's pipelineSymbol: a status ring plus a bare tally
 				symbol: { trigger: "gap-1.5" }
 			}
@@ -41,6 +41,9 @@
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
 	import PipelineSymbol from "./PipelineSymbol.svelte";
 	import ShimmerText from "$lib/components/ui/ShimmerText.svelte";
+	import Button from "$lib/components/ui/Button.svelte";
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
 
 	interface Props {
 		ownerHandle: string;
@@ -50,15 +53,28 @@
 		variant?: PipelineWorkflowsVariants["variant"];
 		/** symbol variant only: "2/3" against the full "2/3 passed, 1/3 failed" breakdown */
 		summary?: "short" | "long";
+		chevron?: boolean;
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		iconClass?: string;
 	}
 
-	let { ownerHandle, repoName, pipeline, variant = "count", summary = "short" }: Props = $props();
+	let {
+		ownerHandle,
+		repoName,
+		pipeline,
+		variant = "count",
+		summary = "short",
+		chevron = false,
+		icon,
+		iconClass
+	}: Props = $props();
 
 	const count = $derived(pipeline.workflows.length);
 	const finished = $derived(finishedCount(pipeline));
 	const noun = $derived(count === 1 ? "workflow" : "workflows");
 	// show the ratio only while something is still running
 	const label = $derived(finished === count ? `${count} ${noun}` : `${finished}/${count} ${noun}`);
+	const Icon = $derived(icon);
 
 	const classes = $derived(pipelineWorkflows({ variant }));
 </script>
@@ -66,7 +82,9 @@
 {#if count === 0}
 	<!-- no workflows yet, so nothing to open -->
 	<ShimmerText color="inherit" duration={3} delay={0}>
-		<span
+		<Button
+			variant="ghost"
+			disabled
 			class={classes.waiting()}
 			title={variant === "symbol" ? "Waiting for a spindle" : undefined}
 		>
@@ -74,11 +92,16 @@
 			{#if variant === "count"}
 				<span class={classes.status()}>Waiting for a spindle…</span>
 			{/if}
-		</span>
+		</Button>
 	</ShimmerText>
 {:else}
+	<!-- the ghost button is Dropdown's own trigger: a Button inside the trigger
+	     snippet nests a <button> in a <button>, which the parser unnests, leaving
+	     the visible content outside the element that carries popovertarget -->
 	<Dropdown
 		group="pipeline-workflows"
+		variant="button"
+		buttonVariant="ghost"
 		align="left"
 		menuClass="w-72"
 		label={longSummary(pipeline)}
@@ -86,16 +109,19 @@
 	>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
-				{#if variant === "symbol"}
-					<PipelineSymbol {pipeline} class={classes.symbol()} />
+				{#if chevron}
+					{#if Icon}
+						<Icon class="size-3 {iconClass}" aria-hidden="true" />
+					{/if}
 					<span class={classes.status()}>
-						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+						{label}
 					</span>
+					<ChevronDown class={classes.icon()} aria-hidden="true" />
 				{:else}
+					<PipelineSymbol {pipeline} class={classes.symbol()} />
 					<span class={classes.status()}>
-						{label}
+						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
 					</span>
-					<ChevronDown class={classes.icon()} aria-hidden="true" />
 				{/if}
 			</span>
 		{/snippet}