diff --git a/tests/e2e/modal.test.e2e.ts b/tests/e2e/modal.test.e2e.ts
index 4451b2543d..9afe2d38c2 100644
--- a/tests/e2e/modal.test.e2e.ts
+++ b/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);
+});
diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css
index 7ef4618a18..6e01487665 100644
--- a/web_src/css/modules/dimmer.css
+++ b/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;
+  }
 }
diff --git a/web_src/js/modules/dimmer.ts b/web_src/js/modules/dimmer.ts
index 7f1cbaa7ad..3c8bde7a10 100644
--- a/web_src/js/modules/dimmer.ts
+++ b/web_src/js/modules/dimmer.ts
@@ -38,6 +38,7 @@ class Dimmer {
   }
   removeClass() {}
   hasClass() {}
+  addClass() {}
 }
 
 export function initDimmer() {