From a9c125c21c289a69b31bb9db74cf608be365bc88 Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Sun, 31 May 2026 02:19:32 +0530
Subject: [PATCH] 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 | 58 +++++++++++++++----------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/App/components/ui/searchable-select.tsx b/App/components/ui/searchable-select.tsx
index b4ce4f1..d36e597 100644
--- a/App/components/ui/searchable-select.tsx
+++ b/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
-            ${isCompact ? "min-w-[280px]" : ""}`}
-          style={{ maxWidth: isCompact ? "360px" : undefined }}
+          className={`absolute z-50 mt-1 rounded-lg border border-neutral-200 bg-white shadow-xl
+            ${isCompact
+              ? "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) => (
-                <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">
-                    {group.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 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>