From 459dbe71ca857304a5ffba7d94defd0beb279fb4 Mon Sep 17 00:00:00 2001
From: kolaente <hello@kolaente.de>
Date: Mon, 4 May 2026 15:33:59 +0200
Subject: [PATCH] Improve modal responsive sizing with inline-size constraints
 (#2716)

---
 frontend/src/components/misc/Modal.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 356774f9b..f33dd5aac 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -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 {