fix: context menu sub menu

Signed-off-by: Innei <i@innei.in>

src/renderer/src/components/ui/context-menu/context-menu.tsx

@@ -31,7 +31,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <i className="i-mingcute-right-fill ml-auto size-3.5" />
+    <i className="i-mingcute-right-line -mr-1 ml-auto size-3.5" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

src/renderer/src/providers/context-menu-provider.tsx

@@ -2,6 +2,7 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuPortal,
   ContextMenuSeparator,
   ContextMenuSub,
   ContextMenuSubContent,
@@ -16,6 +17,7 @@ import type { NativeMenuItem } from "@renderer/lib/native-menu"
 import { CONTEXT_MENU_SHOW_EVENT_KEY } from "@renderer/lib/native-menu"
 import type { ReactNode } from "react"
 import {
+  Fragment,
   memo,
   useCallback,
   useEffect,
@@ -126,15 +128,17 @@ const Item = memo(({ item }: { item: NativeMenuItem }) => {
     }
     case "text": {
       const Wrapper = item.submenu ? ContextMenuSubTrigger : ContextMenuItem
+
+      const Sub = item.submenu ? ContextMenuSub : Fragment
       return (
-        <ContextMenuSub>
+        <Sub>
           <Wrapper
             ref={itemRef}
-            disabled={item.enabled === false || (item.click === undefined && !item.submenu)}
+            disabled={item.enabled === false ||
+              (item.click === undefined && !item.submenu)}
             onClick={onClick}
-            className="flex items-center gap-1"
+            className="flex items-center gap-2"
           >
-            {/* {!!item.icon && <span className="mr-1">{item.icon}</span>} */}
             {item.icon}
             {item.label}
 
@@ -143,16 +147,17 @@ const Item = memo(({ item }: { item: NativeMenuItem }) => {
                 <KbdCombined joint>{item.shortcut}</KbdCombined>
               </div>
             )}
-
-            {item.submenu && (
+          </Wrapper>
+          {item.submenu && (
+            <ContextMenuPortal>
               <ContextMenuSubContent>
                 {item.submenu.map((subItem, index) => (
                   <Item key={index} item={subItem} />
                 ))}
               </ContextMenuSubContent>
-            )}
-          </Wrapper>
-        </ContextMenuSub>
+            </ContextMenuPortal>
+          )}
+        </Sub>
       )
     }
     default: {