v2.51 - FIx Expandable @

Author: imjustinliao

frontend/src/components/ui/ContentTypePicker.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { memo, useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { memo, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo } from "react"
+import { createPortal } from "react-dom"
 import {
   CONTENT_TYPE_OPTIONS,
   CONTENT_TYPE_ICONS,
@@ -53,6 +54,7 @@ const ContentTypePicker = memo(function ContentTypePicker({
   const triggeredRef = useRef(false)
   const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map())
   const submenuTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const submenuAnchorRef = useRef<HTMLDivElement | null>(null)
 
   const hasSelection = selected.length > 0
 
@@ -377,6 +379,7 @@ const ContentTypePicker = memo(function ContentTypePicker({
               return (
                 <div
                   key={t.id}
+                  ref={activeSubmenu === t.id ? submenuAnchorRef : undefined}
                   style={{ position: "relative" }}
                   onMouseEnter={() => {
                     setHighlightIdx(idx)
@@ -469,9 +472,10 @@ const ContentTypePicker = memo(function ContentTypePicker({
                     )}
                   </button>
 
-                  {/* Sub-menu for variants */}
+                  {/* Sub-menu for variants (rendered in portal so it's not clipped by overflow) */}
                   {hasVariants && activeSubmenu === t.id && (
                     <VariantSubmenu
+                      anchorRef={submenuAnchorRef}
                       parent={t}
                       variants={getFilteredVariants(t)}
                       selected={parentSelected}
@@ -503,9 +507,12 @@ const ContentTypePicker = memo(function ContentTypePicker({
   )
 })
 
-/* ── Variant Sub-menu ── */
+/* ── Variant Sub-menu (portal so it isn't clipped by list overflow) ── */
+
+const SUBMENU_OFFSET = 4
 
 const VariantSubmenu = memo(function VariantSubmenu({
+  anchorRef,
   parent,
   variants,
   selected,
@@ -520,6 +527,7 @@ const VariantSubmenu = memo(function VariantSubmenu({
   popupBorder,
   itemHoverBg,
 }: {
+  anchorRef: React.RefObject<HTMLDivElement | null>
   parent: ContentTypeOption
   variants: { id: string; label: string }[]
   selected: string[]
@@ -535,14 +543,26 @@ const VariantSubmenu = memo(function VariantSubmenu({
   popupBorder: string
   itemHoverBg: string
 }) {
-  return (
+  const [position, setPosition] = useState({ top: 0, left: 0 })
+
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current
+    if (!anchor) return
+    const rect = anchor.getBoundingClientRect()
+    setPosition({
+      top: rect.top,
+      left: rect.right + SUBMENU_OFFSET,
+    })
+  }, [anchorRef])
+
+  const submenuEl = (
     <div
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={{
-        position: "absolute",
-        left: "calc(100% + 4px)",
-        top: 0,
+        position: "fixed",
+        top: position.top,
+        left: position.left,
         background: popupBg,
         border: `1px solid ${popupBorder}`,
         borderRadius: "12px",
@@ -554,7 +574,7 @@ const VariantSubmenu = memo(function VariantSubmenu({
         boxShadow: isDark
           ? "0 8px 30px rgba(0,0,0,0.5)"
           : "0 6px 24px rgba(0,0,0,0.12)",
-        zIndex: 101,
+        zIndex: 10002,
       }}
     >
       {/* Sub-menu header */}
@@ -620,6 +640,9 @@ const VariantSubmenu = memo(function VariantSubmenu({
       })}
     </div>
   )
+
+  if (typeof document === "undefined") return null
+  return createPortal(submenuEl, document.body)
 })
 
 export default ContentTypePicker