shad0w/pelagia-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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>
This commit is contained in:
Hardik 2026-05-31 02:19:32 +05:30
parent fc6f3146d4
commit a9c125c21c
1 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
App/components/ui/searchable-select.tsx
View file

@ -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>