fix(css): settings dropdowns open under prefers-reduced-motion (#8290)

[JohnMcLear]

Fixes #8290. Supersedes #8291 and includes @kfogel's fix commit as-is (authorship kept), with a regression test added.

Under prefers-reduced-motion the popup kept transform: scale(1). Any transform makes .popup-content the containing block for the position:fixed nice-select list, so the list was positioned relative to the popup and never appeared. The fix uses transform: none.

Test: Playwright emulateMedia({reducedMotion:'reduce'}). It opens the font and language dropdowns at the bottom of a scrolled settings popup and asserts that the list is visible and in the viewport. The existing dropdown test runs without reduced motion, which is why it never caught this.

Thanks @kfogel for the diagnosis and fix.

🤖 Generated with Claude Code

https://claude.ai/code/session_012cFUmwE79DiLX4VsJqoTZV

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Fix settings dropdowns under reduced motion

🐞 Bug fix 🧪 Tests 🕐 10-20 Minutes

AI Description

• Remove the settings popup transform under reduced motion so fixed-position dropdowns use the
 viewport.
• Add Playwright coverage for font and language dropdowns in a scrolled settings popup.

Diagram

graph TD
  A["Reduced motion"] --> B["Popup CSS"] --> C["No transform"] --> D["Viewport reference"] --> E["Dropdown lists"]
  F["Playwright tests"] --> E

Loading

High-Level Assessment

The targeted CSS fix addresses the containing-block cause while preserving the existing reduced-motion transition rule. Reworking dropdown positioning would be broader and riskier for this issue.

Files changed (2) +26 / -1

Bug fix (1) +1 / -1

popup.cssRemove the popup transform under reduced motion +1/-1

Remove the popup transform under reduced motion

• Changes the reduced-motion popup transform from 'scale(1)' to 'none'. This prevents the popup from becoming the containing block for fixed-position dropdown lists while leaving transitions disabled.

src/static/skins/colibris/src/components/popup.css

Tests (1) +25 / -0

pad_settings.spec.tsCover reduced-motion font and language dropdowns +25/-0

Cover reduced-motion font and language dropdowns

• Adds parameterized Playwright tests that enable reduced motion and scroll a short settings popup to the bottom. Each test checks that its dropdown list opens visibly in the viewport and closes after selecting an option.

src/tests/frontend-new/specs/pad_settings.spec.ts

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can tweak Display settings with a live preview to see your comment before it ships

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[JohnMcLear]

Verified locally on Chromium. With popup.css reverted to develop's transform: scale(1), both new reduced-motion tests fail: the .list is not in the viewport. With the fix they pass, and the existing scrolled-dropdown test passes in both runs.

[kfogel]

@JohnMcLear Thank you so much! I felt mildly guilty about not having included the regression test; it was awfully sporting of you to just supply it yourself and not even look at me side-eyed (at least not in any way that the GitHub UI shows :-) ). 🙏