Improve modal responsive sizing with inline-size constraints (#2716)

This commit is contained in:
kolaente 2026-05-04 15:33:59 +02:00 committed by GitHub
parent 6a604dd949
commit 459dbe71ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 0 deletions

View File

@ -256,6 +256,20 @@ $modal-width: 1024px;
}
}
// Default width for centered modals. Scoped with :not(.is-wide) so the
// `wide` prop can still expand the modal (the .is-wide rule below would
// otherwise be outranked by .default .modal-content's specificity).
.default .modal-content:not(.is-wide),
.hint-modal .modal-content:not(.is-wide) {
inline-size: calc(100% - 2rem);
max-inline-size: 640px;
@media screen and (max-width: $tablet) {
inline-size: 100%;
max-inline-size: none;
}
}
// scrolling-content
// used e.g. for <TaskDetailViewModal>
.scrolling .modal-content {