Fix wiki search overflowing on wide screens (#6047)

Confine the search menu to be at most the width of the page, or 80% of
the viewport width, whichever is smaller. To do this, introduce a new
`--container-width` variable for the descendant elements of
`.ui.container` to be able to access.

Also update the relevant e2e test: add a long 'lorem ipsum' page, add a
search for it, parameterize the width.
This commit is contained in:
Oto Šťáva 2024-11-24 16:41:09 +01:00
parent ad70e7dfb3
commit c0777279fe
No known key found for this signature in database
GPG key ID: 32B22D20C9B4E680
10 changed files with 65 additions and 25 deletions

View file

@ -6,17 +6,26 @@
import {expect} from '@playwright/test';
import {test} from './utils_e2e.ts';
test(`Search for long titles and test for no overflow`, async ({page}, workerInfo) => {
test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
await page.goto('/user2/repo1/wiki');
await page.getByPlaceholder('Search wiki').fill('spaces');
await page.getByPlaceholder('Search wiki').click();
// workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
// so we manually "type" the last letter
await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
// timeout is necessary because HTMX search could be slow
await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
});
for (const searchTerm of ['space', 'consectetur']) {
for (const width of [null, 2560, 4000]) {
test(`Search for '${searchTerm}' and test for no overflow ${width && `on ${width}-wide viewport` || ''}`, async ({page, viewport}, workerInfo) => {
test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');
await page.setViewportSize({
width: width ?? viewport.width,
height: 1440, // We're testing that we fit horizontally - vertical scrolling is fine.
});
await page.goto('/user2/repo1/wiki');
await page.getByPlaceholder('Search wiki').fill(searchTerm);
await page.getByPlaceholder('Search wiki').click();
// workaround: HTMX listens on keyup events, playwright's fill only triggers the input event
// so we manually "type" the last letter
await page.getByPlaceholder('Search wiki').dispatchEvent('keyup');
// timeout is necessary because HTMX search could be slow
await expect(page.locator('#wiki-search a[href]')).toBeInViewport({ratio: 1});
});
}
}
test(`Search results show titles (and not file names)`, async ({page}, workerInfo) => {
test.skip(workerInfo.project.name === 'Mobile Safari', 'Fails as always, see https://codeberg.org/forgejo/forgejo/pulls/5326#issuecomment-2313275');