diff --git a/web/src/lib/components/ui/Dropdown.stories.svelte b/web/src/lib/components/ui/Dropdown.stories.svelte
index 69d3cabe..2f9ecdcb 100644
--- a/web/src/lib/components/ui/Dropdown.stories.svelte
+++ b/web/src/lib/components/ui/Dropdown.stories.svelte
@@ -54,6 +54,25 @@
 	</Dropdown>
 </Story>
 
+<!-- `size` goes straight to the trigger Button, so it drives the trigger's height,
+	padding and label size the same way it does on a standalone Button. -->
+<Story name="Button trigger sizes" asChild>
+	<div class="flex items-center gap-3">
+		<Dropdown variant="button" size="sm" trigger={actionsTrigger} label="Actions">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+			<DropdownItem icon={Settings}>Settings</DropdownItem>
+		</Dropdown>
+		<Dropdown variant="button" size="md" trigger={actionsTrigger} label="Actions">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+			<DropdownItem icon={Settings}>Settings</DropdownItem>
+		</Dropdown>
+		<Dropdown variant="button" size="lg" trigger={actionsTrigger} label="Actions">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+			<DropdownItem icon={Settings}>Settings</DropdownItem>
+		</Dropdown>
+	</div>
+</Story>
+
 <!-- `align="right"` anchors the menu's right edge to the trigger, for triggers near
 	the right edge of the viewport (e.g. the topbar profile menu). Default is left. -->
 <Story name="Right aligned" asChild>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 2ddc8254..b2ba4f51 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -5,8 +5,7 @@
 	export const dropdown = tv({
 		slots: {
 			root: "relative inline-block",
-			plainTrigger:
-				"flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit",
+			plainTrigger: "min-h-0 gap-1 border-0 bg-transparent p-0 text-inherit hover:bg-transparent",
 			menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
 		},
 		variants: {
@@ -57,6 +56,8 @@
 		group?: string;
 		variant?: "plain" | "button";
 		buttonVariant?: ButtonVariants["variant"];
+		size?: ButtonVariants["size"];
+		insetShadow?: ButtonVariants["insetShadow"];
 		align?: DropdownVariants["align"];
 		label?: string;
 		menuClass?: string;
@@ -69,6 +70,8 @@
 		group,
 		variant = "plain",
 		buttonVariant = "default",
+		insetShadow = false,
+		size = "md",
 		align = "left",
 		label,
 		menuClass,
@@ -78,19 +81,13 @@
 
 	let open = $state(false);
 	const classes = $derived(dropdown({ align }));
-	let triggerWrapper = $state<HTMLElement>();
-	let triggerButtonEl = $state<HTMLElement>();
+	let triggerElement = $state<HTMLAnchorElement | HTMLButtonElement>();
 	let menuElement = $state<HTMLElement>();
 	const fallbackId = $props.id();
 	const menuId = $derived(id ?? fallbackId);
 
-	const triggerElement = () =>
-		variant === "button"
-			? triggerWrapper?.querySelector<HTMLElement>("button, a")
-			: triggerButtonEl;
-
 	const focusTrigger = () => {
-		triggerElement()?.focus();
+		triggerElement?.focus();
 	};
 	// intentionally not $state: only used for imperative focus, and reactive
 	// reads inside DropdownItem's register $effect would loop it forever
@@ -117,7 +114,7 @@
 	const onTriggerKeydown = (event: KeyboardEvent) => {
 		if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
 			event.preventDefault();
-			triggerElement()?.click();
+			triggerElement?.click();
 		}
 	};
 
@@ -181,38 +178,22 @@
 </script>
 
 <div class={classes.root()}>
-	{#if variant === "button"}
-		<span bind:this={triggerWrapper} class="contents">
-			<Button
-				variant={buttonVariant}
-				class="px-3"
-				popovertarget={menuId}
-				popovertargetaction="toggle"
-				onkeydown={onTriggerKeydown}
-				aria-haspopup="menu"
-				aria-expanded={open}
-				aria-controls={menuId}
-				aria-label={label}
-			>
-				{@render trigger()}
-			</Button>
-		</span>
-	{:else}
-		<button
-			bind:this={triggerButtonEl}
-			type="button"
-			class={classes.plainTrigger()}
-			popovertarget={menuId}
-			popovertargetaction="toggle"
-			onkeydown={onTriggerKeydown}
-			aria-haspopup="menu"
-			aria-expanded={open}
-			aria-controls={menuId}
-			aria-label={label}
-		>
-			{@render trigger()}
-		</button>
-	{/if}
+	<Button
+		bind:ref={triggerElement}
+		variant={variant === "button" ? buttonVariant : "ghost"}
+		{size}
+		class={variant === "button" ? undefined : classes.plainTrigger()}
+		popovertarget={menuId}
+		popovertargetaction="toggle"
+		onkeydown={onTriggerKeydown}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-controls={menuId}
+		aria-label={label}
+		insetShadow={insetShadow}
+	>
+		{@render trigger()}
+	</Button>
 
 	<div
 		bind:this={menuElement}