🐛 Fix invisible filter dropdown values in Firefox #45

Open

oss-helper-2026 wants to merge 2 commits from oss-helper-2026/v2-web:fix/40-firefox-select-option-contrast into master

pull from: oss-helper-2026/v2-web:fix/40-firefox-select-option-contrast

merge into: playsearch.kaki87.net:master

playsearch.kaki87.net:master

Conversation 1 Commits 2 Files changed 4 +20

oss-helper-2026 commented 2026-10-25 19:52:00 +01:00

First-time contributor

Copy link

Closes #40

Problem

On Firefox (reported on Windows 10, Firefox 136), the values inside the footer filter dropdowns Category and Android version are invisible once the list is opened. The same lists render correctly in Chromium.

Root cause

• src/index.html declares :root { color-scheme: dark } and <body class="uk-light uk-background-secondary">, so native controls get a dark surface.
• UIkit's dark tile theme styles the closed .uk-select (translucent background, light text), but its base rule .uk-select:not([multiple]):not([size]) option { color: #666 } remains and no option background is defined.
• Firefox paints the open listbox using the dark color-scheme surface, so the #666 option text ends up dark-on-dark (near-invisible). Chromium paints its own high-contrast popup surface, which is why it was unaffected.

Fix

Give the footer's listbox options an explicit foreground/background matching the app's dark theme, using a selector at least as specific as UIkit's base rule:

.App__Footer .uk-select:not([multiple]):not([size]) option {
    color: #f0f0f0;
    background-color: #222;
}

CSS-only, single file (src/components/AppFooter.vue); no behavior or markup change.

Verification

• Reproduced from master locally (yarn start, production API): Firefox computes the dropdown options as rgb(102,102,102) on a dark surface — low contrast; Chromium paints its own surface and looks fine.
• After the fix, options compute to rgb(240,240,240) on rgb(34,34,34) in both Firefox and Chromium; the native Firefox listbox shows every value clearly (screenshots attached via follow-up comment).
• yarn build succeeds; the rule is present in the built CSS bundle.
• The closed select(s), the filters themselves and the layout are unchanged.

Impact

• Any user opening the Category / Android version filters on a browser that honors color-scheme: dark for native popups (notably Firefox) gets readable options instead of an empty-looking list.
• No API, data or platform-specific code is touched; Chromium appearance only gains consistency.

Closes #40 ## Problem On Firefox (reported on Windows 10, Firefox 136), the values inside the footer filter dropdowns **Category** and **Android version** are invisible once the list is opened. The same lists render correctly in Chromium. ## Root cause - `src/index.html` declares `:root { color-scheme: dark }` and `<body class="uk-light uk-background-secondary">`, so native controls get a dark surface. - UIkit's dark tile theme styles the *closed* `.uk-select` (translucent background, light text), but its base rule `.uk-select:not([multiple]):not([size]) option { color: #666 }` remains and no option background is defined. - Firefox paints the open listbox using the dark `color-scheme` surface, so the `#666` option text ends up dark-on-dark (near-invisible). Chromium paints its own high-contrast popup surface, which is why it was unaffected. ## Fix Give the footer's listbox options an explicit foreground/background matching the app's dark theme, using a selector at least as specific as UIkit's base rule: ```css .App__Footer .uk-select:not([multiple]):not([size]) option { color: #f0f0f0; background-color: #222; } ``` CSS-only, single file (`src/components/AppFooter.vue`); no behavior or markup change. ## Verification - Reproduced from `master` locally (`yarn start`, production API): Firefox computes the dropdown options as `rgb(102,102,102)` on a dark surface — low contrast; Chromium paints its own surface and looks fine. - After the fix, options compute to `rgb(240,240,240)` on `rgb(34,34,34)` in **both** Firefox and Chromium; the native Firefox listbox shows every value clearly (screenshots attached via follow-up comment). - `yarn build` succeeds; the rule is present in the built CSS bundle. - The closed select(s), the filters themselves and the layout are unchanged. ## Impact - Any user opening the Category / Android version filters on a browser that honors `color-scheme: dark` for native popups (notably Firefox) gets readable options instead of an empty-looking list. - No API, data or platform-specific code is touched; Chromium appearance only gains consistency.

oss-helper-2026 added 1 commit 2026-10-25 19:52:00 +01:00

🐛 Fix invisible filter dropdown values in Firefox ... eb78670c6c

UIkit .uk-select option text is set to #666 by its base rule while the
.app makes the control dark through .uk-background-secondary / uk-light
and declares `color-scheme: dark` on :root. Firefox paints the native
listbox surface dark; the #666 option text then has almost no contrast,
so Category / Android version filter values are invisible (Chromium
paints its own surface and was not affected).

Give the footer's single selects explicit option foreground/background
matching the app's dark theme, with a selector at least as specific as
UIkit's `.uk-select:not([multiple]):not([size]) option`.

Refs: playsearch.kaki87.net/v2-web#40

oss-helper-2026 commented 2026-10-25 20:17:52 +01:00

Author

First-time contributor

Copy link

Verification screenshots

Native Firefox dropdown ("Android version" filter, dark surface) before / after this change:

Before — option text computed as rgb(102,102,102) on a dark listbox, nearly invisible:

After — options compute as rgb(240,240,240) on rgb(34,34,34), every value readable:

Screenshots are kept on the PR branch under docs/screenshots/ as evidence (can be removed before merge). Reproduced locally with the dev server against the production API; yarn build passes.

(Replaces an earlier comment whose image attachments failed to render due to an instance storage issue.)

### Verification screenshots Native Firefox dropdown ("Android version" filter, dark surface) before / after this change: **Before** — option text computed as `rgb(102,102,102)` on a dark listbox, nearly invisible:  **After** — options compute as `rgb(240,240,240)` on `rgb(34,34,34)`, every value readable:  Screenshots are kept on the PR branch under `docs/screenshots/` as evidence (can be removed before merge). Reproduced locally with the dev server against the production API; `yarn build` passes. _(Replaces an earlier comment whose image attachments failed to render due to an instance storage issue.)_

oss-helper-2026 added 1 commit 2026-10-25 20:20:56 +01:00

📕 Add before/after screenshots for #40 dropdown fix c4a57de959

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u 'fix/40-firefox-select-option-contrast:oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'oss-helper-2026-fix/40-firefox-select-option-contrast'

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git checkout 'master'

git merge --no-ff 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git rebase 'master'

git checkout 'master'

git merge --ff-only 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git rebase 'master'

git checkout 'master'

git merge --no-ff 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'master'

git merge --squash 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'master'

git merge --ff-only 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git checkout 'master'

git merge 'oss-helper-2026-fix/40-firefox-select-option-contrast'

git push origin 'master'

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: playsearch.kaki87.net/v2-web#45

No description provided.