lfg2025/archy
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 61 Wiki Activity

fix(ui): normalize dropdowns — one chevron, even right padding, label truncation

Browse Source 
Native select arrows rendered with inconsistent right padding across
views and long labels could overflow into the icon. Global select rule:
appearance-none + a single SVG chevron at a fixed inset, uniform
padding-right (overrides ad-hoc pr-* utilities), ellipsis truncation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago 2026-07-14 08:53:31 -04:00
parent 7b36b5cc34
commit dc3892182d
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
neode-ui/src/style.css
View File

@ -3081,3 +3081,25 @@ select.mesh-bitcoin-input option { background: #1a1a2e; color: rgba(255,255,255,
.mesh-deadman-field { display: flex; flex-direction: column; gap: 4px; }
.mesh-deadman-info { display: flex; gap: 12px; flex-wrap: wrap; }
.mesh-deadman-info-item { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
/* ── Global dropdown normalization ─────────────────────────────────────────
Native select arrows rendered with inconsistent right padding per browser
and per ad-hoc utility classes, and long labels could run into the icon.
One rule for every select: no native arrow, one chevron at a fixed inset,
uniform right padding (wins over pr-* utilities), and ellipsis truncation. */
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem 1rem;
padding-right: 2.5rem !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
select::-ms-expand {
display: none;
}