From 86ec62d10b2885eede9aaa9db1afbab9d703892c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 18 Jun 2026 22:24:47 +0200
Subject: [PATCH] fix(frontend): scroll tall default modals instead of clipping
 their top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Centered default/hint-modal content used translate(-50%, -50%) with no
height cap, so a taller-than-viewport modal (e.g. project background
settings with the Unsplash grid) pushed its top edge above the viewport
where the container's overflow can't reach it — the upload button became
unreachable on short screens.

Cap the centered content to the viewport and scroll inside it, mirroring
the height limit the .top (quick actions) variant already has. The mobile
breakpoint resets both so the fullscreen layout keeps flowing in
.modal-container.
---
 frontend/src/components/misc/Modal.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index b654e0268..5450d0a99 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -272,6 +272,12 @@ $modal-width: 1024px;
 	inset-block-start: 50%;
 	inset-inline-start: 50%;
 	transform: translate(-50%, -50%);
+	// Cap centered content to the viewport and scroll inside it. Without this a
+	// taller-than-viewport modal centres its top edge above the viewport, where
+	// the container's overflow can't scroll to it (the .top variant overrides
+	// both values below).
+	max-block-size: calc(100dvh - 2rem);
+	overflow: auto;
 
 	[dir="rtl"] & {
 		transform: translate(50%, -50%);
@@ -281,6 +287,9 @@ $modal-width: 1024px;
 		margin: 0;
 		position: static;
 		transform: none;
+		// the fullscreen mobile layout flows and scrolls in .modal-container
+		max-block-size: none;
+		overflow: visible;
 	}
 
 	.modal-header {