From 2042a60b9155b1afb317aa9e60b99e83f754c5d1 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Mon, 1 Jun 2026 18:16:31 +0300
Subject: [PATCH] Fix DropdownMenuLabel: render plain div instead of Base UI
 GroupLabel

Base UI's Menu.GroupLabel requires a surrounding Menu.Group (unlike
Radix's standalone Label), so using DropdownMenuLabel as a bare heading
threw "MenuGroupContext is missing" at runtime. Render a <div> directly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/ui/dropdown-menu.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx
index b38264f..fa37d05 100644
--- a/frontend/components/ui/dropdown-menu.tsx
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -57,11 +57,14 @@ function DropdownMenuLabel({
   className,
   inset,
   ...props
-}: MenuPrimitive.GroupLabel.Props & {
+}: React.ComponentProps<"div"> & {
   inset?: boolean
 }) {
+  // Base UI's Menu.GroupLabel requires a surrounding Menu.Group (unlike Radix's
+  // standalone Label). These menus use the label as a plain heading, so render a
+  // <div> directly to avoid the "MenuGroupContext is missing" error.
   return (
-    <MenuPrimitive.GroupLabel
+    <div
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(