From 989892db0ebc2b82fd7e161f3f23b4b97c095904 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 15 Oct 2024 11:17:39 +0200
Subject: [PATCH 1/2] Add `@media print` to enable printing of articles in
 modals

This `@media print` CSS changes affect styles only during print.
---
 src/stories/Library/Modals/modal.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
index 70cb857f9..baf469168 100644
--- a/src/stories/Library/Modals/modal.scss
+++ b/src/stories/Library/Modals/modal.scss
@@ -115,3 +115,22 @@
   justify-content: flex-end;
   padding: 20px;
 }
+
+// Adjust the modal to display all content when printing
+@media print {
+  .modal {
+    position: static !important;
+    overflow: visible !important;
+    width: auto !important;
+    height: auto !important;
+    opacity: 1 !important;
+    display: block !important;
+  }
+
+  // Hide elements that shouldn't appear in print
+  .modal-backdrop,
+  .modal-btn-close,
+  .modal-btn-fallback {
+    display: none !important;
+  }
+}

From 4639dfef94ab1cf8fab6bc37c87eb7a466193c22 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Tue, 15 Oct 2024 11:25:35 +0200
Subject: [PATCH 2/2] Remove `!important` as they were not necessary

---
 src/stories/Library/Modals/modal.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/stories/Library/Modals/modal.scss b/src/stories/Library/Modals/modal.scss
index baf469168..9c4a1760a 100644
--- a/src/stories/Library/Modals/modal.scss
+++ b/src/stories/Library/Modals/modal.scss
@@ -119,18 +119,18 @@
 // Adjust the modal to display all content when printing
 @media print {
   .modal {
-    position: static !important;
-    overflow: visible !important;
-    width: auto !important;
-    height: auto !important;
-    opacity: 1 !important;
-    display: block !important;
+    position: static;
+    overflow: visible;
+    width: auto;
+    height: auto;
+    opacity: 1;
+    display: block;
   }
 
   // Hide elements that shouldn't appear in print
   .modal-backdrop,
   .modal-btn-close,
   .modal-btn-fallback {
-    display: none !important;
+    display: none;
   }
 }