kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): scroll tall default modals instead of clipping their top 

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.
This commit is contained in:
kolaente 2026-06-18 22:24:47 +02:00
parent 37a34cc5cf
commit 86ec62d10b
No known key found for this signature in database
1 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/misc/Modal.vue
View File

@ -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 {