oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ui): ensure dimmer always covers whole page (#7471)

- Ensure that the dimmer always covers the whole page and that the modal is centered.
- Ensure that `body` hides overflow so you cannot scroll on the page after the modal is opened.
- The adjusted CSS 'behavior' originates from the original dimmer module.
- Regression of https://codeberg.org/forgejo/forgejo/pulls/7416.
- E2E test added.

Screenshots

Before:
https://codeberg.org/attachments/fb8c84b3-94ba-4597-b468-4bf344f356ed

After:
https://codeberg.org/attachments/a6583eb9-1ec7-4e40-960a-4986f6e17535

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7471
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

authored by

Gusted
Gusted and committed by
0ko 6fa5705d 56cc841b

+39 -1
+33
tests/e2e/dimmer.test.e2e.ts
··· 37 37 await expect(page.locator('.ui.dimmer')).toHaveCount(1); 38 38 await save_visual(page); 39 39 }); 40 + 41 + test('Dimmed overflow', async ({page}, workerInfo) => { 42 + test.skip(['Mobile Safari'].includes(workerInfo.project.name), 'Mouse wheel is not supported in mobile WebKit'); 43 + await page.goto('/user2/repo1/_new/master/'); 44 + 45 + // Type in a file name. 46 + await page.locator('#file-name').click(); 47 + await page.keyboard.type('todo.txt'); 48 + 49 + // Scroll to the bottom. 50 + const scrollY = await page.evaluate(() => document.body.scrollHeight); 51 + await page.mouse.wheel(0, scrollY); 52 + 53 + // Click on 'Commit changes' 54 + await page.locator('#commit-button').click(); 55 + 56 + // Expect a 'are you sure, this file is empty' modal. 57 + await expect(page.locator('.ui.dimmer')).toBeVisible(); 58 + await expect(page.locator('.ui.dimmer .header')).toContainText('Commit an empty file'); 59 + await save_visual(page); 60 + 61 + // Trickery to check that the dimmer covers the whole page. 62 + const viewport = page.viewportSize(); 63 + const box = await page.locator('.ui.dimmer').boundingBox(); 64 + expect(box.x).toBe(0); 65 + expect(box.y).toBe(0); 66 + expect(box.width).toBe(viewport.width); 67 + expect(box.height).toBe(viewport.height); 68 + 69 + // Trickery to check the page cannot be scrolled. 70 + const {scrollHeight, clientHeight} = await page.evaluate(() => document.body); 71 + expect(scrollHeight).toBe(clientHeight); 72 + });
+6 -1
web_src/css/modules/dimmer.css
··· 1 + body:has(> .ui.active.dimmer) { 2 + overflow: hidden; 3 + } 4 + 1 5 .ui.active.dimmer { 2 6 display: flex; 3 7 opacity: 1; ··· 10 14 display: none; 11 15 flex-direction: column; 12 16 height: 100%; 13 - position: absolute; 17 + position: fixed; 14 18 opacity: 0; 19 + transform-origin: center center; 15 20 justify-content: center; 16 21 user-select: none; 17 22 width: 100%;