Browse Source

fix(mobile): modals should act more as pages on mobile devices

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan 3 years ago
parent
commit
1288ffd367
1 changed files with 21 additions and 0 deletions
  1. 21 0
      frontend/src/components/Modal.vue

+ 21 - 0
frontend/src/components/Modal.vue

@@ -103,4 +103,25 @@ p {
 		column-gap: 16px;
 	}
 }
+
+@media screen and (max-width: 600px) {
+	.modal-card {
+		max-height: none;
+
+		.modal-card-body {
+			// padding: 0;
+		}
+
+		.modal-card-head,
+		.modal-card-foot {
+			border-radius: 0;
+		}
+	}
+}
+
+@media screen and (max-height: 650px) {
+	.modal-card {
+		height: 100%;
+	}
+}
 </style>