Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JohnMcLear merged 2 commits into from
Oct 11, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1fe9660
Use 'none' transform to get correct reference box
kfogel Sep 29, 2026
2145158
test(settings): dropdowns open under prefers-reduced-motion (#8290)
JohnMcLear Oct 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/static/skins/colibris/src/components/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

@media (prefers-reduced-motion) {
.popup>.popup-content {
transform: scale(1);
transform: none;
transition: none;
}
.nice-select .list {
Expand Down
25 changes: 25 additions & 0 deletions src/tests/frontend-new/specs/pad_settings.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,31 @@ test.describe('creator-owned pad settings', () => {
await expect(fontDropdown).not.toHaveClass(/open/);
});

// #8290: under prefers-reduced-motion the popup kept `transform: scale(1)`.
// Any transform makes .popup-content the containing block for the
// position:fixed list above, so the list was laid out relative to the popup
// instead of the viewport and never appeared. The test above runs without
// reduced motion, so it never saw this.
for (const id of ['padsettings-viewfontmenu', 'padsettings-languagemenu']) {
test(`#${id} dropdown opens under prefers-reduced-motion`, async ({page}) => {
await page.emulateMedia({reducedMotion: 'reduce'});
await page.setViewportSize({width: 900, height: 500});
await goToNewPad(page);
await showSettings(page);
await page.locator('#settings > .popup-content').evaluate((el) => {
el.scrollTop = el.scrollHeight;
});
const dropdown = page.locator(`#${id} + .nice-select`);
await expect(dropdown).toBeInViewport();
await dropdown.click();
const list = dropdown.locator('.list');
await expect(list).toBeVisible();
await expect(list).toBeInViewport();
await dropdown.locator('.option').first().click();
await expect(dropdown).not.toHaveClass(/open/);
});
}

// #7592: ticking "Disable chat" must visibly disable the dependent
// "Chat always on screen" / "Show Chat and Users" toggles, not just
// make the underlying inputs non-interactive.
Expand Down
Loading