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,11 +175,16 @@ 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) => {
+                // 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">
+                    <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">
-                    {group.group}
+                      {groupLabel}
                     </div>
                     {/* Items */}
                     {group.items.map((item) => (
@@ -191,7 +200,8 @@ export function SearchableSelect({
                       </button>
                     ))}
                   </div>
-              ))
+                );
+              })
             )}
           </div>
         </div>