From 2b15bb515410c6455297443d926a2b2e0d0d7bd3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 12 Sep 2024 16:22:04 +0200
Subject: [PATCH] fix(modal): make sure modal and its content scrolls properly
 on mobile

Related to https://github.com/go-vikunja/vikunja/issues/309

(cherry picked from commit f53b93d98ae35e904dd24944722a0388421cca5e)
---
 frontend/src/components/misc/Modal.vue | 37 ++++++++++++++------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index e65724818..cd79e0ee4 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -20,6 +20,12 @@
 					class="modal-container"
 					@mousedown.self.prevent.stop="$emit('close')"
 				>
+					<BaseButton
+						class="close"
+						@click="$emit('close')"
+					>
+						<Icon icon="times" />
+					</BaseButton>
 					<div
 						class="modal-content"
 						:class="{
@@ -27,13 +33,6 @@
 							'is-wide': wide
 						}"
 					>
-						<BaseButton
-							class="close"
-							@click="$emit('close')"
-						>
-							<Icon icon="times" />
-						</BaseButton>
-
 						<slot>
 							<div class="header">
 								<slot name="header" />
@@ -137,8 +136,8 @@ $modal-width: 1024px;
 
 	@media screen and (max-width: $tablet) {
 		margin: 0;
-		top: 25%;
-		transform: translate(-50%, -25%);
+		position: static;
+		transform: none;
 	}
 
 	.header {
@@ -197,7 +196,7 @@ $modal-width: 1024px;
 	position: fixed;
 	top: .5rem;
 	right: $close-button-padding;
-	color: var(--grey-900);
+	color: var(--white);
 	font-size: 2rem;
 
 	@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop	} + #{$close-button-min-space})) {
@@ -206,18 +205,13 @@ $modal-width: 1024px;
 		// we align the close button to the modal until there is enough space outside for it
 		transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
 	}
-	// we can only use light color when there is enough space for the close button next to the modal
-	@media screen and (min-width: calc(#{$desktop	} + #{$close-button-min-space})) {
-		color: var(--white);
-	}
 
 	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
 		top: .75rem;
 	}
-
 }
 
-@media print {
+@media print, screen and (max-width: $tablet) {
   .modal-mask {
     position: static;
     overflow: visible !important;
@@ -226,6 +220,7 @@ $modal-width: 1024px;
   .modal-container {
     height: auto;
     overflow: visible;
+	min-height: 100vh;
   }
 
   .modal-content {
@@ -236,6 +231,14 @@ $modal-width: 1024px;
     display: none;
   }
 
+  :deep(.card) {
+	border: none !important; 
+	border-radius: 0 !important;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+  }
 }
 </style>
 
@@ -245,7 +248,7 @@ $modal-width: 1024px;
 	color: var(--grey-900);
 }
 
-@media print {
+@media print, screen and (max-width: $tablet) {
   body:has(.modal-mask) {
     height: auto;
     overflow: visible;