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>

tests/e2e/dimmer.test.e2e.ts

@@ -37,3 +37,36 @@ test('Dimmed modal', async ({page}) => {
   await expect(page.locator('.ui.dimmer')).toHaveCount(1);
   await save_visual(page);
 });
+
+test('Dimmed overflow', async ({page}, workerInfo) => {
+  test.skip(['Mobile Safari'].includes(workerInfo.project.name), 'Mouse wheel is not supported in mobile WebKit');
+  await page.goto('/user2/repo1/_new/master/');
+
+  // Type in a file name.
+  await page.locator('#file-name').click();
+  await page.keyboard.type('todo.txt');
+
+  // Scroll to the bottom.
+  const scrollY = await page.evaluate(() => document.body.scrollHeight);
+  await page.mouse.wheel(0, scrollY);
+
+  // Click on 'Commit changes'
+  await page.locator('#commit-button').click();
+
+  // Expect a 'are you sure, this file is empty' modal.
+  await expect(page.locator('.ui.dimmer')).toBeVisible();
+  await expect(page.locator('.ui.dimmer .header')).toContainText('Commit an empty file');
+  await save_visual(page);
+
+  // Trickery to check that the dimmer covers the whole page.
+  const viewport = page.viewportSize();
+  const box = await page.locator('.ui.dimmer').boundingBox();
+  expect(box.x).toBe(0);
+  expect(box.y).toBe(0);
+  expect(box.width).toBe(viewport.width);
+  expect(box.height).toBe(viewport.height);
+
+  // Trickery to check the page cannot be scrolled.
+  const {scrollHeight, clientHeight} = await page.evaluate(() => document.body);
+  expect(scrollHeight).toBe(clientHeight);
+});

web_src/css/modules/dimmer.css

@@ -1,3 +1,7 @@
+body:has(> .ui.active.dimmer) {
+  overflow: hidden;
+}
+
 .ui.active.dimmer {
   display: flex;
   opacity: 1;
@@ -10,8 +14,9 @@
   display: none;
   flex-direction: column;
   height: 100%;
-  position: absolute;
+  position: fixed;
   opacity: 0;
+  transform-origin: center center;
   justify-content: center;
   user-select: none;
   width: 100%;