forked from kevadesu/forgejo
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:
parent
ad70e7dfb3
commit
c0777279fe
10 changed files with 65 additions and 25 deletions
|
@ -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');
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue