fix: modals on small viewport height (#11547)

- For small modals fomantic tried to add a `scrolling` class using a function that was not implemented, this function is now stubbed.
- There's not really a need to conditionally change the behavior of scrolling or not, we can specify `overflow-y: auto` which is more than enough to take care of this. We do add some layout changes to ensure the modal is fully scrollable.
- Refactor to nested CSS.
- Resolves forgejo/forgejo#10991

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

tests/e2e/modal.test.e2e.ts

@@ -103,3 +103,27 @@ test('Dialog modal: width', async ({page, isMobile}) => {
     expect(width).toBe(800);
   }
 });
+
+test('Dialog modal: short viewport', async ({page, isMobile}) => {
+  test.skip(isMobile);
+
+  // Small height for viewport.
+  await page.setViewportSize({
+    width: 1000,
+    height: 200,
+  });
+
+  await page.goto('/user2/repo1/settings');
+
+  // Open modal with long content
+  const deleteModal = page.locator('#delete-repo-modal');
+  await expect(deleteModal).toBeHidden();
+  await page.getByRole('button', {name: 'Delete this repository'}).click();
+  await expect(deleteModal).toBeVisible();
+
+  // Scroll to the bottom.
+  const scrollY = await page.evaluate(() => document.querySelector('.ui.dimmer').scrollHeight);
+  await page.mouse.wheel(0, scrollY);
+  const scrollTop = await page.evaluate(() => document.querySelector('.ui.dimmer').scrollTop);
+  expect(scrollTop).toBeGreaterThan(0);
+});

web_src/css/modules/dimmer.css

@@ -2,11 +2,6 @@ body:has(> .ui.active.dimmer) {
   overflow: hidden;
 }
 
-.ui.active.dimmer {
-  display: flex;
-  opacity: 1;
-}
-
 .ui.dimmer {
   align-items: center;
   animation-fill-mode: both;
@@ -16,10 +11,20 @@ body:has(> .ui.active.dimmer) {
   height: 100%;
   position: fixed;
   opacity: 0;
+  overflow: hidden auto;
   transform-origin: center center;
   justify-content: center;
   user-select: none;
   width: 100%;
   will-change: opacity;
   z-index: 1000;
+
+  &.active {
+    display: flex;
+    opacity: 1;
+  }
+
+  .scrolling {
+    top: 1em;
+  }
 }

web_src/js/modules/dimmer.ts

@@ -38,6 +38,7 @@ class Dimmer {
   }
   removeClass() {}
   hasClass() {}
+  addClass() {}
 }
 
 export function initDimmer() {