Skip to content

fix(7696): scrollable settings popup on short viewports #7703

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JohnMcLear merged 3 commits into from
May 7, 2026
Merged

fix(7696): scrollable settings popup on short viewports #7703

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb10ec7
fix(7696): make settings popup scroll on short viewports
JohnMcLear May 7, 2026
26cebda
fix(7696): float nice-select dropdowns above scrollable popups
JohnMcLear May 7, 2026
3db8487
fix(7696): nice-select reverse list disappeared in scrolled popup
JohnMcLear May 7, 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
15 changes: 11 additions & 4 deletions src/static/css/pad/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,17 @@
background: #f7f7f7;
min-width: min(300px, 90vw);
max-width: min(600px, 95vw);
/* Constrain height so popups (notably Settings with Pad-wide Settings
enabled) scroll instead of cropping items off-screen on short windows.
Fixes #7696. */
max-height: calc(100vh - 20px);
overflow-y: auto;
Comment thread
qodo-free-for-open-source-projects[bot] marked this conversation as resolved.
}

/* Chat manages its own scroll and floats author-colour pickers outside the
popup, so it must not become a scroll container. */
.popup#users .popup-content {
overflow: visible;
}
.popup input[type=text] {
width: 100%;
Expand Down Expand Up @@ -76,10 +87,6 @@
}
.popup-content {
max-height: 80vh;
overflow: auto;
}
.popup#users .popup-content {
overflow: visible;
}
}
/* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
Expand Down
23 changes: 23 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 @@ -167,6 +167,29 @@ test.describe('creator-owned pad settings', () => {
await context2.close();
});

// #7696: on a short viewport the settings popup must scroll so items in
// Pad-wide Settings (notably "Delete pad") stay reachable instead of being
// cropped off-screen with no scrollbar.
test('settings popup stays scrollable when the viewport is short', async ({page}) => {
await page.setViewportSize({width: 900, height: 500});
await goToNewPad(page);
await showSettings(page);

const popupContent = page.locator('#settings > .popup-content');
await expect(popupContent).toBeVisible();
await expect(page.locator('#pad-settings-section')).toBeVisible();

const dims = await popupContent.evaluate((el) => ({
overflowY: getComputedStyle(el).overflowY,
scrolls: el.scrollHeight > el.clientHeight,
}));
expect(dims.overflowY).toBe('auto');
expect(dims.scrolls).toBe(true);

await page.locator('#delete-pad').scrollIntoViewIfNeeded();
await expect(page.locator('#delete-pad')).toBeInViewport();
});

// #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