fix: reranker model dropdown labels

[joeyorlando]

Summary

• Adds opt-in popover width control to the shared searchable select.
• Lets the LLM model selector render untruncated, wrapping option labels when requested.
• Applies the wider, non-truncating behavior to the Settings > Knowledge reranker model dropdown so long model names are visible.

[claude]

Claude finished @joeyorlando's task in 2m 39s —— View job

---

PR Review: fix: reranker model dropdown labels

• Read CLAUDE.md for repo-specific guidance
• Read changed files
• Analyze the changes
• Post review feedback

---

Overall this is a clean, well-scoped fix for a real UX problem (long reranker model names getting truncated). The change is additive, backwards-compatible, and ships with focused tests for the new behavior. Nice work.

Summary of changes

• ui/searchable-select.tsx — adds opt-in props: contentClassName, contentSide, contentAlign, contentAvoidCollisions, listClassName. Also switches the hard-coded max-h-[300px] on the list to a viewport-aware max-h-[min(300px,calc(var(--radix-popover-content-available-height)-3rem))].
• llm-model-select.tsx — threads those popover props through as popoverContentClassName / popoverListClassName / popoverSide / popoverAlign / popoverAvoidCollisions, and adds truncateOptionLabels to allow wrapping option labels.
• app/settings/knowledge/page.tsx — applies the new behavior to both the embedding and reranker model selects via two module-level constants.
• Adds tests for SearchableSelect (side/align/listClassName) and LlmModelSearchableSelect (fit-content popover + wrapping labels).

What I like

• Opt-in defaults preserve current behavior everywhere else (truncateOptionLabels = true, no contentClassName by default). Good backwards compatibility.
• Shared KNOWLEDGE_MODEL_POPOVER_CLASS / KNOWLEDGE_MODEL_POPOVER_LIST_CLASS constants avoid duplication between embedding and reranker selects in knowledge/page.tsx:80-83.
• The new max-h-[min(300px,calc(var(--radix-popover-content-available-height)-3rem))] on the list is a nice generic improvement — it keeps the 300px cap on tall viewports but clamps to the available space on short ones. Relying on --radix-popover-content-available-height is correct here since avoidCollisions defaults to true.
• Using cn() (tailwind-merge) means a caller-provided max-h-[...] in listClassName cleanly overrides the default, which the knowledge/page.tsx override at KNOWLEDGE_MODEL_POPOVER_LIST_CLASS depends on. I confirmed this works correctly.
• Tests use real user interactions (userEvent.click) and check observable behavior (classes actually applied, data-side / data-align attributes) rather than implementation details — this matches the "Test What Matters" guideline in platform/CLAUDE.md.

Suggestions / nits

1. RerankerModelSelector empty state loses styling — platform/frontend/src/app/settings/knowledge/page.tsx:337-348 renders a disabled LlmModelSearchableSelect as a placeholder when no API key is selected, but it doesn't pass the new popoverContentClassName / popoverListClassName / popoverSide / popoverAlign / truncateOptionLabels props. Since the dropdown is disabled the popover never opens, so this is purely cosmetic/consistency. Still, if someone toggles between states, having consistent props reduces cognitive load. Optional cleanup.

   Fix this →

2. Prop surface is growing — LlmModelSearchableSelect now takes 6 popover-related props (popoverContentClassName, popoverListClassName, truncateOptionLabels, popoverSide, popoverAlign, popoverAvoidCollisions). If you anticipate more call sites needing custom popover behavior, consider collapsing these into a single popoverProps?: { contentClassName?, listClassName?, side?, align?, avoidCollisions? } object. Not necessary for this PR, but worth keeping in mind if this grows again.

3. LlmModelOptionLabel truncation only applies to the model line — platform/frontend/src/components/llm-model-select.tsx:65-72: when truncateOptionLabels={false} but showPricing or description is set, the secondary lines still use truncate. Probably intentional for the knowledge use case (no pricing/description there), but if this prop gets reused for a pricing-heavy context later, the description line will still get clipped. Consider either documenting that limitation or propagating the wrap behavior.

4. Test brittleness — data-slot selector — in searchable-select.test.tsx:38-40 and llm-model-select.test.tsx:38-40, the tests use .closest("[data-slot='popover-content']"). This couples to the shadcn popover internal structure. It works today, but if the popover implementation changes its data-slot value the tests break silently with confusing errors. A getByRole("dialog") or explicit data-testid on the PopoverContent would be more resilient. Minor.

5. llm-model-select.test.tsx — exact class assertion — line 40-44 asserts that the popover content has all three classes w-max, min-w-[var(--radix-popover-trigger-width)], and max-w-[min(32rem,calc(100vw-2rem))]. Since SearchableSelect itself applies w-[var(--radix-popover-trigger-width)] first and then merges contentClassName, this depends on tailwind-merge behavior. It's currently correct (w-max wins), but asserting on the merged class string is fragile to Tailwind/twMerge version bumps. Consider asserting on computed width via getBoundingClientRect, or accept this as a tradeoff. Minor.

6. Naming consistency — the underlying SearchableSelect uses contentSide / contentAlign but the wrapper LlmModelSearchableSelect renames them to popoverSide / popoverAlign. Both naming schemes are valid but the asymmetry is a small papercut when tracing props through. Not worth changing here, just flagging.

Correctness / behavior checks I performed

• ✅ cn() / tailwind-merge correctly resolves w-[var(...)] vs w-max (caller override wins).
• ✅ max-h-[min(300px,calc(var(--radix-popover-content-available-height)-3rem))] gracefully falls back since avoidCollisions defaults to true on Radix popovers.
• ✅ --radix-popover-content-available-height only exists when collision detection is enabled — default in this codebase, so safe.
• ✅ The listClassName test asserts parentElement has the class — verified that in searchable-select.tsx:144-150 the scroll container is indeed the direct parent of option buttons.
• ✅ No try/catch added in components (matches the "Never throw on HTTP errors" guideline, though not applicable here).
• ✅ Additive prop changes — no breaking changes to existing call sites.
• ✅ LlmModelOptionLabel signature change is additive (new optional prop with default).

Questions

• Did you confirm the fix visually on both the embedding and reranker dropdowns on a short-viewport (e.g. 720px) display? The max-h-[min(220px,...)] cap in KNOWLEDGE_MODEL_POPOVER_LIST_CLASS is tighter than the default 300px — just want to make sure long model lists still scroll well there.
• Any reason for the asymmetric defaults (popoverAlign="end" / popoverSide="bottom" at the call sites in knowledge/page.tsx) rather than the general defaults? The recent commit history (Pin knowledge model popovers to bottom, Align knowledge model popovers to trigger end) suggests these are intentional pinning fixes — a short comment near KNOWLEDGE_MODEL_POPOVER_CLASS explaining why they're pinned would help future readers.

Verdict

LGTM with the minor suggestions above. The tests cover the new behavior well, the change is surgical, and the implementation follows the existing component patterns. None of the suggestions are blockers.
• Branch