Fix invisible select chevron in all presets (#136) #151

Merged
fen merged 1 commits from fix-136-select-chevron into dev 2026-09-10 04:31:27 +00:00
Collaborator

Fixes #136

Root cause (two compounding issues)

  1. CSP blocked the chevron image entirely. The CSP had no img-src, so it fell back to default-src 'self', which blocks data: URIs. The chevron background-image never painted on any served page — confirmed via rendered screenshots (pixel forensics) and getComputedStyle (computed background-image was correct but nothing painted).
  2. .editor-head select used the background shorthand, wiping the background-image set by the later select rule (specificity conflict).
  3. Additionally the hardcoded %23888 stroke was too low-contrast on dark backgrounds.

Fix

  • CSP: add img-src 'self' data: (web.go + test updated).
  • .editor-head select: background shorthand → background-color so it no longer strips the image.
  • Chevron stroke is now a per-preset --chevron token: light stroke (#C8C8D4) for dark presets, dark stroke (#555560) for the 5 light presets, instead of hardcoded #888. Right padding (30px) already reserves space.

Rendered proof (headless chromium, 1400x900, Custom expiry selected)

  • Dark preset /new: language select + custom expiry unit select both show chevron (pixel-verified + visual check).
  • Light preset ?theme=smooth /new: both show chevron with dark stroke.
  • /settings dark + smooth: no selects present on that page (verified via DOM query).
  • getComputedStyle().backgroundImage confirms correct themed stroke on every visible select in both presets.

go vet + go test ./... pass.

Fixes #136 ## Root cause (two compounding issues) 1. **CSP blocked the chevron image entirely.** The CSP had no `img-src`, so it fell back to `default-src 'self'`, which blocks `data:` URIs. The chevron background-image never painted on any served page — confirmed via rendered screenshots (pixel forensics) and `getComputedStyle` (computed background-image was correct but nothing painted). 2. **`.editor-head select` used the `background` shorthand**, wiping the background-image set by the later `select` rule (specificity conflict). 3. Additionally the hardcoded `%23888` stroke was too low-contrast on dark backgrounds. ## Fix - CSP: add `img-src 'self' data:` (web.go + test updated). - `.editor-head select`: `background` shorthand → `background-color` so it no longer strips the image. - Chevron stroke is now a per-preset `--chevron` token: light stroke (`#C8C8D4`) for dark presets, dark stroke (`#555560`) for the 5 light presets, instead of hardcoded `#888`. Right padding (30px) already reserves space. ## Rendered proof (headless chromium, 1400x900, Custom expiry selected) - Dark preset `/new`: language select + custom expiry unit select both show chevron (pixel-verified + visual check). - Light preset `?theme=smooth` `/new`: both show chevron with dark stroke. - `/settings` dark + smooth: no selects present on that page (verified via DOM query). - `getComputedStyle().backgroundImage` confirms correct themed stroke on every visible select in both presets. `go vet` + `go test ./...` pass.
fen added 1 commit 2026-09-10 04:25:50 +00:00
Fix invisible select chevron in all presets (#136)
CI / docker (pull_request) Skipped
CI / test (pull_request) Successful in 28s
72dbfb1b3c
Two compounding causes:
- CSP img-src fell back to default-src (self), blocking the data: URI
  chevron image on all served pages, so no select ever painted it.
- .editor-head select used the background shorthand, wiping the
  background-image set by the later select rule.

Chevron stroke is now a per-preset --chevron token (light stroke for
dark presets, dark for light presets) instead of hardcoded #888.
CSP gains img-src 'self' data: so the data-URI icons can load.
fen merged commit 33ccfd373a into dev 2026-09-10 04:31:27 +00:00
Sign in to join this conversation.