/* ========================================================================== Fancy select — every plain stays in the DOM completely unchanged (same id/name/value/change-events), just made invisible, so no other code that reads/sets/submits it needs to know this exists. ========================================================================== */ .fancy-select { position: relative; display: inline-block; } .fancy-select select { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; } .fancy-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; cursor: pointer; text-align: left; } .fancy-select-trigger:disabled { cursor: not-allowed; } .fancy-select-trigger .icon { flex-shrink: 0; color: var(--color-text-faint); transition: transform var(--transition-fast) var(--ease); } .fancy-select.open .fancy-select-trigger .icon { transform: rotate(180deg); } .fancy-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* .fancy-select-list also carries .combo-list (shared base: position/border/ shadow/max-height), which pins left:0;right:0 — fine for the model combobox this component started from, wrong here: a select narrowed down to fit a filter row (e.g. ~200px) must NOT force its dropdown down to that same width. Overridden below so the menu sizes to its own content instead, anchored to the trigger's right edge, capped so it never overflows the viewport or grows a horizontal scrollbar. */ .fancy-select-list { left: auto; right: 0; padding: 0.25rem; min-width: max(100%, 230px); width: max-content; max-width: min(320px, calc(100vw - 2rem)); overflow-x: hidden; } .fancy-select-option { padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.85rem; cursor: pointer; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.3; } .fancy-select-option:hover, .fancy-select-option.active { background: var(--color-surface-muted); } .fancy-select-option.selected { color: var(--color-primary); font-weight: 600; } /* Portaled open state (see openFancySelect/positionFancyList in app.js) — the list moves to a direct child of while open, well above an open modal's z-index (95/96 above) since the empty-dropdown-inside-.modal bug traced back to the list staying nested inside .modal's own stacking context (.modal has a permanent non-none `transform`, making it the containing block for the list and its own compositing layer). */ .fancy-select-list { z-index: 500; }