From b5eaa51560151c46569849f41057375c0275b4cd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 12 Sep 2024 11:02:12 +0200
Subject: [PATCH] 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)
---
 .../src/components/home/AddToHomeScreen.vue   |  4 ++
 frontend/src/components/misc/Modal.vue        | 42 +++++++++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index cd41cd8a5..2a5239c45 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -69,6 +69,10 @@ const shouldShowMessage = computed(() => {
 	@media screen and (min-width: $tablet) {
 		display: none;
 	}
+
+	@media print {
+		display: none;
+	}
 	
 	&.has-update-available {
 		bottom: 5rem;
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 807a24245..e65724818 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -154,12 +154,15 @@ $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
@@ -167,7 +170,7 @@ $modal-width: 1024px;
 		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);
 }
-</style>
\ No newline at end of file
+
+@media print {
+  body:has(.modal-mask) {
+    height: auto;
+    overflow: visible;
+
+	#app {
+		display: none;
+	}
+  }
+}
+</style>