fix(line-items): portal dropdown to escape overflow, hide scrollbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

App/components/po/po-line-items-editor.tsx

@@ -350,7 +350,7 @@ export function LineItemsEditor({
 
   return (
     <div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-neutral-200">

App/components/ui/searchable-select.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useLayoutEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { ChevronDown, Search, X } from "lucide-react";
 import type { AccountGroup } from "@/app/(portal)/po/new/new-po-form";
 
@@ -28,6 +29,27 @@ export function SearchableSelect({
   const [query, setQuery] = useState("");
   const containerRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLInputElement>(null);
+  const [portalStyle, setPortalStyle] = useState<React.CSSProperties>({});
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  // Recalculate portal position whenever the dropdown opens
+  useLayoutEffect(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const PANEL_WIDTH = 420;
+    // Prefer right-aligning with the trigger; clamp so it doesn't go off-screen left
+    const right = window.innerWidth - rect.right;
+    const left = Math.max(8, rect.right - PANEL_WIDTH);
+    setPortalStyle({
+      position: "fixed",
+      top: rect.bottom + 4,
+      left,
+      width: PANEL_WIDTH,
+      zIndex: 9999,
+    });
+  }, [open]);
 
   // Close on outside click / Escape
   useEffect(() => {
@@ -54,61 +76,102 @@ export function SearchableSelect({
     if (open) searchRef.current?.focus();
   }, [open]);
 
-  // Find the display label for the current value
   const selectedItem = groups.flatMap((g) => g.items).find((i) => i.id === value);
   const selectedLabel = selectedItem ? `${selectedItem.code} — ${selectedItem.name}` : "";
 
-  // Filter by query (code or name, case-insensitive)
   const q = query.trim().toLowerCase();
   const filtered = q
     ? groups
         .map((g) => ({
           ...g,
           items: g.items.filter(
-            (i) =>
+            (i) => i.code.toLowerCase().includes(q) || i.name.toLowerCase().includes(q)
-              i.code.toLowerCase().includes(q) ||
-              i.name.toLowerCase().includes(q)
           ),
         }))
         .filter((g) => g.items.length > 0)
     : groups;
 
-  const handleSelect = useCallback(
+  const handleSelect = useCallback((id: string) => {
-    (id: string) => {
+    onChange(id);
-      onChange(id);
+    setOpen(false);
-      setOpen(false);
+    setQuery("");
-      setQuery("");
+  }, [onChange]);
-    },
-    [onChange]
-  );
 
-  const handleClear = useCallback(
+  const handleClear = useCallback((e: React.MouseEvent) => {
-    (e: React.MouseEvent) => {
+    e.stopPropagation();
-      e.stopPropagation();
+    onChange("");
-      onChange("");
+  }, [onChange]);
-    },
-    [onChange]
-  );
 
   const isCompact = size === "compact";
 
+  const dropdownPanel = (
+    <div
+      style={isCompact ? portalStyle : undefined}
+      className={`rounded-lg border border-neutral-200 bg-white shadow-xl
+        ${isCompact ? "" : "absolute z-50 left-0 right-0 mt-1"}`}
+    >
+      {/* Search input */}
+      <div className="flex items-center gap-2 p-2 border-b border-neutral-100">
+        <Search className="h-4 w-4 text-neutral-400 shrink-0" />
+        <input
+          ref={searchRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Type code or name…"
+          className="flex-1 text-sm outline-none placeholder:text-neutral-400"
+        />
+        {query && (
+          <button type="button" onClick={() => setQuery("")} className="text-neutral-300 hover:text-neutral-500">
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+
+      {/* Options list */}
+      <div className="max-h-72 overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300">
+        {filtered.length === 0 ? (
+          <p className="px-3 py-5 text-sm text-center text-neutral-400">No codes match &ldquo;{query}&rdquo;</p>
+        ) : (
+          filtered.map((group) => {
+            // Strip top-level breadcrumb — show only the sub-category part
+            const groupLabel = group.group.includes("›")
+              ? group.group.split("›").pop()!.trim()
+              : group.group;
+            return (
+              <div key={group.group}>
+                <div className="sticky top-0 px-3 py-1 text-xs font-semibold text-neutral-500 bg-neutral-50 border-b border-neutral-100 truncate">
+                  {groupLabel}
+                </div>
+                {group.items.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onMouseDown={(e) => { e.preventDefault(); handleSelect(item.id); }}
+                    className={`w-full text-left flex items-baseline gap-2.5 px-3 py-2 text-sm hover:bg-primary-50 transition-colors
+                      ${value === item.id ? "bg-primary-50 text-primary-700 font-medium" : "text-neutral-800"}`}
+                  >
+                    <span className="font-mono text-xs text-neutral-400 shrink-0 w-14">{item.code}</span>
+                    <span className="flex-1 leading-snug">{item.name}</span>
+                  </button>
+                ))}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+
   return (
     <div ref={containerRef} className="relative w-full">
-      {/* Hidden input for form submission */}
       <input type="hidden" name={name} value={value} />
       {required && !value && (
-        /* Invisible trick to trigger native "required" validation on submit */
+        <input tabIndex={-1} required value={value} onChange={() => {}}
-        <input
+          className="absolute opacity-0 w-0 h-0 pointer-events-none" aria-hidden />
-          tabIndex={-1}
-          required
-          value={value}
-          onChange={() => {}}
-          className="absolute opacity-0 w-0 h-0 pointer-events-none"
-          aria-hidden
-        />
       )}
 
-      {/* Trigger */}
+      {/* Trigger button — same appearance for both sizes */}
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
@@ -118,93 +181,26 @@ export function SearchableSelect({
           focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
           ${isCompact ? "px-2 py-1.5 text-xs" : "px-3 py-2.5 text-sm"}`}
       >
-        <span
+        <span className={`truncate flex-1 min-w-0 ${selectedLabel ? "text-neutral-900" : "text-neutral-400"}`}>
-          className={`truncate flex-1 min-w-0 ${selectedLabel ? "text-neutral-900" : "text-neutral-400"}`}
-        >
           {selectedLabel || placeholder}
         </span>
         <span className="flex items-center gap-1 shrink-0">
           {value && (
-            <span
+            <span role="button" tabIndex={0} onClick={handleClear}
-              role="button"
-              tabIndex={0}
-              onClick={handleClear}
               onKeyDown={(e) => e.key === "Enter" && handleClear(e as unknown as React.MouseEvent)}
-              className="text-neutral-300 hover:text-neutral-500 transition-colors"
+              className="text-neutral-300 hover:text-neutral-500 transition-colors">
-            >
               <X className={isCompact ? "h-3 w-3" : "h-4 w-4"} />
             </span>
           )}
-          <ChevronDown
+          <ChevronDown className={`text-neutral-400 transition-transform ${open ? "rotate-180" : ""} ${isCompact ? "h-3 w-3" : "h-4 w-4"}`} />
-            className={`text-neutral-400 transition-transform ${open ? "rotate-180" : ""} ${isCompact ? "h-3 w-3" : "h-4 w-4"}`}
-          />
         </span>
       </button>
 
-      {/* Dropdown panel
+      {/* Dropdown: compact uses a portal (fixed) to escape overflow-x-auto containers */}
-          default: full-width anchored left
-          compact: fixed 380px anchored to right edge of trigger (won't overflow table) */}
       {open && (
-        <div
+        isCompact && mounted
-          className={`absolute z-50 mt-1 rounded-lg border border-neutral-200 bg-white shadow-xl
+          ? createPortal(dropdownPanel, document.body)
-            ${isCompact
+          : dropdownPanel
-              ? "right-0 w-[380px]"
-              : "left-0 right-0"
-            }`}
-        >
-          {/* Search input */}
-          <div className="flex items-center gap-2 p-2 border-b border-neutral-100">
-            <Search className="h-4 w-4 text-neutral-400 shrink-0" />
-            <input
-              ref={searchRef}
-              type="text"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Type code or name…"
-              className="flex-1 text-sm outline-none placeholder:text-neutral-400"
-            />
-            {query && (
-              <button type="button" onClick={() => setQuery("")} className="text-neutral-300 hover:text-neutral-500">
-                <X className="h-3.5 w-3.5" />
-              </button>
-            )}
-          </div>
-
-          {/* Options */}
-          <div className="max-h-64 overflow-y-auto overscroll-contain">
-            {filtered.length === 0 ? (
-              <p className="px-3 py-5 text-sm text-center text-neutral-400">No codes match "{query}"</p>
-            ) : (
-              filtered.map((group) => {
-                // In compact mode show only the sub-category (after ›), not the full breadcrumb
-                const groupLabel = isCompact && group.group.includes("›")
-                  ? group.group.split("›").pop()!.trim()
-                  : group.group;
-                return (
-                  <div key={group.group}>
-                    {/* Group header */}
-                    <div className="sticky top-0 px-3 py-1 text-xs font-semibold text-neutral-500 bg-neutral-50 border-b border-neutral-100 truncate">
-                      {groupLabel}
-                    </div>
-                    {/* Items */}
-                    {group.items.map((item) => (
-                      <button
-                        key={item.id}
-                        type="button"
-                        onMouseDown={(e) => { e.preventDefault(); handleSelect(item.id); }}
-                        className={`w-full text-left flex items-baseline gap-2.5 px-3 py-2 text-sm hover:bg-primary-50 transition-colors
-                          ${value === item.id ? "bg-primary-50 text-primary-700 font-medium" : "text-neutral-800"}`}
-                      >
-                        <span className="font-mono text-xs text-neutral-400 shrink-0 w-14">{item.code}</span>
-                        <span className="flex-1 leading-snug">{item.name}</span>
-                      </button>
-                    ))}
-                  </div>
-                );
-              })
-            )}
-          </div>
-        </div>
       )}
     </div>
   );