/* TvEntityPicker popup styling. Unscoped on purpose. Syncfusion relocates the ComboBox popup out of the component's markup and into a container at the end of , so it never carries the .razor.css scope attribute — a scoped rule targeting .e-popup silently matches nothing. Same reason UserThinCard.css exists. Everything here is gated on .tv-entity-picker-combo, which the component passes via the SfComboBox CssClass parameter. Syncfusion copies that class onto both the input wrapper and the popup, which is the only supported hook for reaching one component's popup. Nothing here may be written unqualified: these element classes are shared by every dropdown in the application. */ /* Entity display text is routinely a composite ("00998877 | Some Long Customer Name A/S"), which wrapped to two lines in a popup sized to the input. Width follows the content instead: `auto` on an absolutely positioned element is shrink-to-fit, so short lists stay compact and long ones grow — Syncfusion's default of 100% is overridden by PopupWidth on the component. */ .e-popup.tv-entity-picker-combo { /* Floor: never narrower than a comfortable reading width, even when the current page happens to hold only short values. Ceiling: stay inside the viewport on a phone, where 92vw leaves the popup visibly inset rather than bleeding to both edges. */ min-width: 22rem; max-width: min(42rem, 92vw); } /* Past the ceiling, wrap rather than truncate. An ellipsised customer name is indistinguishable from another customer with the same prefix, which is exactly the choice the user is making here. */ .e-popup.tv-entity-picker-combo .e-list-item { white-space: normal; /* Syncfusion insets list text with text-indent, which applies to the first line only — so a wrapped second line would start hard against the edge. Zeroing it and paying for the inset with real padding indents every line equally. Both must change together: dropping the indent without adding the padding leaves the text with no left inset at all. */ text-indent: 0; padding: 6px 16px; height: auto; line-height: 1.5; }