fix(task): make print styles work when printing task detail view from kanban

Resolves https://community.vikunja.io/t/feature-request-export-a-task-as-pdf/2735/6

(cherry picked from commit cc1b4bbd1b22c346590685bd5272a8635cdc7715)

frontend/src/components/home/AddToHomeScreen.vue

@@ -70,6 +70,10 @@ const shouldShowMessage = computed(() => {
 		display: none;
 	}
 
+	@media print {
+		display: none;
+	}
+	
 	&.has-update-available {
 		bottom: 5rem;
 	}

frontend/src/components/misc/Modal.vue

@@ -154,20 +154,23 @@ $modal-width: 1024px;
 // scrolling-content
 // used e.g. for <TaskDetailViewModal>
 .scrolling .modal-content {
-	max-width: $modal-width;
 	width: 100%;
 	margin: $modal-margin auto;
 
 	max-height: none; // reset bulma
 	overflow: visible; // reset bulma
 	
+	@media not print {
+		max-width: $modal-width;
+	}
+
 	@media screen and (min-width: $tablet) {
 		max-height: none; // reset bulma
 		margin: $modal-margin auto; // reset bulma
 		width: 100%;
 	}
 
-	@media screen and (max-width: $desktop) {
+	@media screen and (max-width: $desktop), print {
 		margin: 0;
 	}
 }
@@ -211,6 +214,28 @@ $modal-width: 1024px;
 	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
 		top: .75rem;
 	}
+
+}
+
+@media print {
+  .modal-mask {
+    position: static;
+    overflow: visible !important;
+  }
+
+  .modal-container {
+    height: auto;
+    overflow: visible;
+  }
+
+  .modal-content {
+    position: static;
+  }
+
+  .close {
+    display: none;
+  }
+
 }
 </style>
 
@@ -219,4 +244,15 @@ $modal-width: 1024px;
 .dark .close {
 	color: var(--grey-900);
 }
+
+@media print {
+  body:has(.modal-mask) {
+    height: auto;
+    overflow: visible;
+
+	#app {
+		display: none;
+	}
+  }
+}
 </style>