fix(searchable-select): compact mode dropdown positioning and group labels

- Compact dropdown is now right-anchored at fixed 380px width so it
  extends leftward from the trigger and doesn't overflow the table edge
- Group headers in compact mode show only the sub-category (strip the
  top-level breadcrumb before the arrow) and are single-line truncated

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

App/components/ui/searchable-select.tsx

@@ -141,12 +141,16 @@ export function SearchableSelect({
         </span>
       </button>
 
-      {/* Dropdown panel */}
+      {/* Dropdown panel
+          default: full-width anchored left
+          compact: fixed 380px anchored to right edge of trigger (won't overflow table) */}
       {open && (
         <div
-          className={`absolute z-50 left-0 right-0 mt-1 rounded-lg border border-neutral-200 bg-white shadow-xl
+          className={`absolute z-50 mt-1 rounded-lg border border-neutral-200 bg-white shadow-xl
-            ${isCompact ? "min-w-[280px]" : ""}`}
+            ${isCompact
-          style={{ maxWidth: isCompact ? "360px" : undefined }}
+              ? "right-0 w-[380px]"
+              : "left-0 right-0"
+            }`}
         >
           {/* Search input */}
           <div className="flex items-center gap-2 p-2 border-b border-neutral-100">
@@ -171,27 +175,33 @@ export function SearchableSelect({
             {filtered.length === 0 ? (
               <p className="px-3 py-5 text-sm text-center text-neutral-400">No codes match "{query}"</p>
             ) : (
-              filtered.map((group) => (
+              filtered.map((group) => {
-                <div key={group.group}>
+                // In compact mode show only the sub-category (after ›), not the full breadcrumb
-                  {/* Group header */}
+                const groupLabel = isCompact && group.group.includes("›")
-                  <div className="sticky top-0 px-3 py-1 text-xs font-semibold text-neutral-500 bg-neutral-50 border-b border-neutral-100">
+                  ? group.group.split("›").pop()!.trim()
-                    {group.group}
+                  : 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>
-                  {/* 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>