feat: add scrolling variant to modal

src/components/modal/modal.vue

@@ -61,6 +61,7 @@ export const TRANSITION_NAMES = {
 export const VARIANTS = {
 	DEFAULT: 'default',
 	HINT_MODAL: 'hint-modal',
+	SCROLLING: 'scrolling',
 }
 
 function validValue(values) {
@@ -126,7 +127,8 @@ export default {
 	overflow: auto;
 }
 
-.modal-content {
+.default .modal-content,
+.hint-modal .modal-content {
 	text-align: center;
 	position: absolute;
 	top: 50%;
@@ -149,15 +151,24 @@ export default {
 	}
 }
 
-::v-deep.close {
-	position: fixed;
-	top: 5px;
-	right: 26px;
-	color: $white;
-	font-size: 2rem;
+// scrolling-content
+// used e.g. for <TaskDetailViewModal>
+.scrolling .modal-content {
+	max-width: 1024px;
+	width: 100%;
+	margin: 4rem auto;
+
+	max-height: none; // reset bulma
+	overflow: visible; // reset bulma
+
+	@media screen and (min-width: $tablet) {
+		max-height: none; // reset bulma
+		margin: 4rem auto; // reset bulma
+		width: 100%;
+	}
 
 	@media screen and (max-width: $desktop) {
-		display: none;
+		margin: 0;
 	}
 }
 

src/views/tasks/TaskDetailViewModal.vue

@@ -1,19 +1,13 @@
 <template>
-	<div class="modal-mask">
-		<div
-			class="modal-container"
-			@mousedown.self="close()"
-			v-shortkey="['esc']"
-			@shortkey="close()"
-		>
-			<div class="scrolling-content">
+	<modal
+		@close="close()"
+		variant="scrolling"
+	>
 				<a @click="close()" class="close">
 					<icon icon="times"/>
 				</a>
 				<task-detail-view/>
-			</div>
-		</div>
-	</div>
+	</modal>
 </template>
 
 <script>
@@ -55,13 +49,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.scrolling-content {
-	max-width: 1024px;
-	width: 100%;
-	margin: 4rem auto;
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: $white;
+	font-size: 2rem;
 
 	@media screen and (max-width: $desktop) {
-		margin: 0;
+		display: none;
 	}
 }
 </style>