fix: stop the promoted-property picker hiding the key name

[hamzahalq]

The problem

The promoted-property filter on the exchanges page showed its keys like this:

A..    ShipmentTraceOut
       InventoryTransactionPosted
Emai…  QuotationOut
Ty…    ContainerClosed

The key name — the only thing you are picking — was squeezed to two characters, or to nothing at all on the rows whose information type has the longest name.

Two causes, both in SearchSelect:

• the hint was shrink-0 and the label was flex-1 truncate, so the label absorbed 100% of the space loss;
• the panel was w-(--input-width), and this particular filter sits in a w-44 slot — 176px for a name plus a 26-character type name.

What changed

Names get their own line. New sublabel on SearchSelectOption, rather than the existing render escape hatch, which skips the checkmark and focus styling along with everything else.

Account Code                              Acoount Code
ShipmentTraceOut, OrderStatusUpdate       ShipmentTraceOut, BookingConfirmedMessage

The list narrows to the picked information type. 14 options to 6 on the test data — and the second line goes away, since repeating the type you just filtered by on every row says nothing.

The hint can no longer starve the label. It shrinks and truncates, capped at half the row. Whatever a hint adds, it is not the half worth keeping when only one of the two fits. This is the part that matters beyond this one page: every other picker in the app had the same latent bug.

The panel may outgrow its input (min-w instead of w, capped at 28rem/90vw). 165px to 293px on the property picker.

The JSONPath is in the row's tooltip, one line per declaring type: ShipmentTraceOut: $.account.code. That is what you check when a filter comes back empty and you can't tell whether the key or the value is wrong.

Search now matches the second line too, so typing Inventory finds all three of that type's keys.

Verified

Reproduced the reported data on the million-row copy — including two keys one character apart (Account Code, Acoount Code) and InventoryTransactionPosted as the longest type name — then drove the picker in a browser:

	rows	panel
all information types	13 keys, every name in full	293px
scoped to ShipmentTraceOut	5 keys, no second line	165px
typing acoount	Acoount Code only
typing Inventory	Movement Type, Sku, Warehouse Code

No regression in the other pickers: the information-type picker on Subscriptions and Bus gateways still reads Shipment trace (out) in full alongside its code chip.

tsc clean, oxlint clean (one pre-existing exhaustive-deps warning, unchanged from base), 76 unit tests pass.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

Next included review available in 36 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Repository: simplify9/coderabbit/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Team

Run ID: 203ff882-0cbf-4e43-ad7c-724ee8246b57

📥 Commits

Reviewing files that changed from the base of the PR and between 0542755 and 80fdbce.

📒 Files selected for processing (2)

• SW.Bitween.Web/ClientApp/src/components/ui/SearchSelect.tsx
• SW.Bitween.Web/ClientApp/src/pages/exchanges/ExchangesPage.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}