Select dropdowns: chevron indicator invisible (low contrast / possibly overridden) - make it visible in all presets #136

Closed
opened 2026-09-10 03:46:47 +00:00 by fen · 1 comment
Collaborator

UI bug: select dropdowns have no visible chevron/arrow affordance. Confirmed on /new: the language selector ('auto') renders as a plain box with no indicator, so it doesn't look clickable.

app.css DOES have a chevron: select { background: var(--bg) url("data:image/svg+xml...stroke='%23888'...") no-repeat right 10px center; } (#123 work). Two likely problems:

  1. Stroke color %23888 (mid-gray #888) is too low contrast against var(--bg) in the dark themes - effectively invisible.
  2. Possible specificity issue: .editor-head select or other rules may override background with a flat var(--bg)/var(--surface), dropping the image.

Fix requirements:

  1. Chevron must be visible in ALL 10 presets (5 base + 5 variants): use currentColor or a stroke color token with adequate contrast rather than hardcoded #888 (data URIs can't use currentColor directly - either use a mask-image approach with background-color: var(--muted-fg), or define per-preset SVG colors, pick the cleaner approach).
  2. Audit all select rules in app.css for specificity conflicts that strip the background image; ensure every rendered select ends up with the chevron.
  3. Verify on /new (language select + custom expiry unit select when 'Custom' is selected in the expiry radio list) and /settings, in a dark and a light preset.
UI bug: select dropdowns have no visible chevron/arrow affordance. Confirmed on /new: the language selector ('auto') renders as a plain box with no indicator, so it doesn't look clickable. app.css DOES have a chevron: `select { background: var(--bg) url("data:image/svg+xml...stroke='%23888'...") no-repeat right 10px center; }` (#123 work). Two likely problems: 1. Stroke color %23888 (mid-gray #888) is too low contrast against var(--bg) in the dark themes - effectively invisible. 2. Possible specificity issue: .editor-head select or other rules may override background with a flat var(--bg)/var(--surface), dropping the image. Fix requirements: 1. Chevron must be visible in ALL 10 presets (5 base + 5 variants): use currentColor or a stroke color token with adequate contrast rather than hardcoded #888 (data URIs can't use currentColor directly - either use a mask-image approach with background-color: var(--muted-fg), or define per-preset SVG colors, pick the cleaner approach). 2. Audit all select rules in app.css for specificity conflicts that strip the background image; ensure every rendered select ends up with the chevron. 3. Verify on /new (language select + custom expiry unit select when 'Custom' is selected in the expiry radio list) and /settings, in a dark and a light preset.
fen added spent time 15 seconds 2026-09-10 03:47:19 +00:00
fen added the In Progress label 2026-09-10 03:47:34 +00:00
fen added QA and removed In Progress labels 2026-09-10 04:26:14 +00:00
fen added spent time 10 seconds 2026-09-10 04:27:36 +00:00
fen closed this issue 2026-09-10 04:31:27 +00:00
Author
Collaborator

QA passed. Verified on live palette-dev (build 33ccfd3): CSP header includes img-src 'self' data:; select chevron renders with themed stroke in midnight (light #C8C8D4) and smooth (dark #555560) presets, pixel-verified via headless chromium crops; computed backgroundImage carries the per-preset --chevron data URI. go vet + go test green on fresh clone. Merged PR #151, branch deleted.

QA passed. Verified on live palette-dev (build 33ccfd3): CSP header includes img-src 'self' data:; select chevron renders with themed stroke in midnight (light #C8C8D4) and smooth (dark #555560) presets, pixel-verified via headless chromium crops; computed backgroundImage carries the per-preset --chevron data URI. go vet + go test green on fresh clone. Merged PR #151, branch deleted.
fen added spent time 24 minutes 2026-09-10 13:57:36 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Total Time Spent: 25 minutes
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: poslop/palette#136