From 864cca6cda0842c7bf01a1f1053d018561728641 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Tue, 29 Sep 2026 09:50:15 +0100
Subject: [PATCH] fix(design-system): update border radius for menu items
 (#50973)

## Problem

Border radiuses for inner items of dropdowns, menus etc. didn't keep up
with recent changes.

## Solution

Adds a token/variable to help keep this consistent across our apps and
components. One caveat is this modifies shadcn components, so I'm open
to alternative ways of doing this.

| Before | After |
|--------|--------|
| <img width="293" height="206" alt="Screenshot 2026-09-28 at 12 00 27"
src="https://github.com/user-attachments/assets/cd5e0708-0223-43ac-9893-a33ce5acd1ca"
/> | <img width="335" height="231" alt="Screenshot 2026-09-28 at 12 00
41"
src="https://github.com/user-attachments/assets/dc993b09-1410-4596-ae8f-4e78e6739fa6"
/> |



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Standardized corner rounding across command items, context menus,
dropdown menus, menubars, select options, and multi-select options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/config/css/theme.css                          |  1 +
 packages/ui-patterns/src/multi-select/multi-select.tsx |  2 +-
 packages/ui/src/components/shadcn/ui/command.tsx       |  2 +-
 packages/ui/src/components/shadcn/ui/context-menu.tsx  |  8 ++++----
 packages/ui/src/components/shadcn/ui/dropdown-menu.tsx |  8 ++++----
 packages/ui/src/components/shadcn/ui/menubar.tsx       | 10 +++++-----
 packages/ui/src/components/shadcn/ui/select.tsx        |  2 +-
 7 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/config/css/theme.css b/packages/config/css/theme.css
index 4a31e180e0b..5c2e7679ba4 100644
--- a/packages/config/css/theme.css
+++ b/packages/config/css/theme.css
@@ -376,6 +376,7 @@
   --breakpoint-xs: 480px;
   --width-listbox: 320px;
   --radius-panel: 6px;
+  --radius-item: calc(var(--radius-md) - 2px);
   --spacing-content: 21px;
   --spacing-card: var(--card-padding-x);
   --transform-origin-dropdown: var(--radix-dropdown-menu-content-transform-origin);
diff --git a/packages/ui-patterns/src/multi-select/multi-select.tsx b/packages/ui-patterns/src/multi-select/multi-select.tsx
index e707ed93586..c16e8c98cf6 100644
--- a/packages/ui-patterns/src/multi-select/multi-select.tsx
+++ b/packages/ui-patterns/src/multi-select/multi-select.tsx
@@ -48,7 +48,7 @@ const DROPDOWN_GAP = 8
 const DROPDOWN_BORDER_HEIGHT = 2
 
 const commandItemClass = cn(
-  'relative text-foreground-light text-left px-2 py-1.5 rounded-xs',
+  'relative text-foreground-light text-left px-2 py-1.5 rounded-item',
   'hover:text-foreground hover:!bg-overlay-hover w-full flex items-center space-x-2',
   'peer-data-[value=true]:bg-overlay-hover'
 )
diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx
index 97207463274..97b5c1825f5 100644
--- a/packages/ui/src/components/shadcn/ui/command.tsx
+++ b/packages/ui/src/components/shadcn/ui/command.tsx
@@ -163,7 +163,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden data-[selected=true]:bg-overlay-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item px-2 py-1.5 text-xs outline-hidden data-[selected=true]:bg-overlay-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/context-menu.tsx b/packages/ui/src/components/shadcn/ui/context-menu.tsx
index 017143707fb..9ea75935bb2 100644
--- a/packages/ui/src/components/shadcn/ui/context-menu.tsx
+++ b/packages/ui/src/components/shadcn/ui/context-menu.tsx
@@ -27,7 +27,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden focus:bg-selection focus:text-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-item px-2 py-1.5 text-xs outline-hidden focus:bg-selection focus:text-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -80,7 +80,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-pointer select-none items-center rounded-item px-2 py-1.5 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-xs outline-hidden focus:bg-selection focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx b/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
index 1eb84f8031d..74ce31b269b 100644
--- a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
@@ -48,7 +48,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-xs pl-2 pr-1 py-1.5 text-xs outline-hidden focus:bg-overlay-hover data-[state=open]:bg-overlay-hover',
+      'flex cursor-default select-none items-center rounded-item pl-2 pr-1 py-1.5 text-xs outline-hidden focus:bg-overlay-hover data-[state=open]:bg-overlay-hover',
       inset && 'pl-8',
       className
     )}
@@ -102,7 +102,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-xs outline-hidden transition-colors focus:bg-overlay-hover focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item px-2 py-1.5 text-xs outline-hidden transition-colors focus:bg-overlay-hover focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -118,7 +118,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     checked={checked}
@@ -141,7 +141,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-xs outline-hidden transition-colors focus:bg-overlay-hover data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/menubar.tsx b/packages/ui/src/components/shadcn/ui/menubar.tsx
index c4fa1193896..28b819e3c8b 100644
--- a/packages/ui/src/components/shadcn/ui/menubar.tsx
+++ b/packages/ui/src/components/shadcn/ui/menubar.tsx
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-xs px-3 py-1.5 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-item px-3 py-1.5 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'flex cursor-default select-none items-center rounded-item px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       inset && 'pl-8',
       className
     )}
@@ -111,7 +111,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -127,7 +127,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     checked={checked}
@@ -150,7 +150,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/select.tsx b/packages/ui/src/components/shadcn/ui/select.tsx
index 7cde4b248cd..576a532f24e 100644
--- a/packages/ui/src/components/shadcn/ui/select.tsx
+++ b/packages/ui/src/components/shadcn/ui/select.tsx
@@ -141,7 +141,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       'group',
-      'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-overlay-hover text-foreground-light focus:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-item py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-overlay-hover text-foreground-light focus:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className
     )}
     {...props}