From e52f24dc02550f9e33adfc75b91746ec53ea0054 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 2 Oct 2026 22:07:06 +0100
Subject: [PATCH] web/ui: style dropdowns like kumo's menus

menus get an inner padding

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/components/notifications/NotificationBell.svelte | 2 +-
 web/src/lib/components/repo/pulls/PullVersionList.svelte     | 2 +-
 web/src/lib/components/ui/Dropdown.svelte                    | 2 +-
 web/src/lib/components/ui/DropdownItem.svelte                | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index 1d8f3f0b2..578558b5a 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -101,7 +101,7 @@
 		size="small"
 		align="right"
 		label="Notifications, {shared.unread} unread"
-		menuClass="w-[36rem]"
+		menuClass="w-[36rem] divide-y divide-border-default p-0"
 	>
 		{#snippet trigger()}
 			<Bell class={buttonIcon({ size: "regular" })} aria-hidden="true" />
diff --git a/web/src/lib/components/repo/pulls/PullVersionList.svelte b/web/src/lib/components/repo/pulls/PullVersionList.svelte
index 1874b8093..160aec238 100644
--- a/web/src/lib/components/repo/pulls/PullVersionList.svelte
+++ b/web/src/lib/components/repo/pulls/PullVersionList.svelte
@@ -54,7 +54,7 @@
 	</button>
 {/snippet}
 
-<Dropdown id={menuId} variant="button" buttonVariant="default" align="right" menuClass="w-fit">
+<Dropdown id={menuId} variant="button" buttonVariant="default" align="right" menuClass="w-fit p-0">
 	{#snippet trigger()}
 		<FileDiff class={triggerIcon} />
 		{#if range.end !== range.start}
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 942bd0a67..6465331b7 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -10,7 +10,7 @@
 			root: "relative inline-flex",
 			plainTrigger:
 				"min-h-0 gap-2xs border-0 bg-transparent p-none text-inherit hover:bg-transparent aria-expanded:bg-transparent",
-			menu: "dropdown-menu fixed inset-auto z-50 m-none h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition touch-pan-y divide-y divide-border-default overflow-auto overscroll-contain rounded-md border border-border-default bg-background-default text-foreground-default shadow-regular [-webkit-overflow-scrolling:touch]"
+			menu: "dropdown-menu fixed inset-auto z-50 m-none h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition touch-pan-y overflow-auto overscroll-contain rounded-md border-0 bg-background-default p-1 text-foreground-default shadow-lg ring ring-alpha-dark-10 [-webkit-overflow-scrolling:touch] [&>hr]:-mx-1 [&>hr]:my-1 [&>hr]:w-auto"
 		},
 		variants: {
 			align: {
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 57e2dd1c5..6ce70782e 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -2,11 +2,11 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdownItem = tv({
-		base: "w-full justify-start rounded-none p-xs text-left focus-visible:-outline-offset-2",
+		base: "w-full justify-start rounded-[calc(var(--radius-md)-var(--spacing))] px-xs text-left focus-visible:-outline-offset-2",
 		variants: {
 			danger: {
 				false: "",
-				true: "text-foreground-danger"
+				true: "text-foreground-danger hover:bg-background-danger-subtle"
 			}
 		},
 		defaultVariants: {
-- 
2.51.2