Iframe test, inside modal, it's weird but seems to work. Modified storeUI.css to change modal.

scripts.js

@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function() {
         return;
     }
   
-    // Event delegation for image clicks
+    // Event delegation for click events
     document.addEventListener('click', function(event) {
             // Log the click event for debugging
             console.log('Click detected:', event.target);
@@ -194,9 +194,19 @@ document.addEventListener("DOMContentLoaded", function() {
     function openPrintModal() {
         // Clone the original content before modifying
         originalContent = document.body.cloneNode(true);
-
         var brewRendererContent = document.getElementById('brewRenderer').innerHTML;
 
+        // Create a hidden iframe or select an existing one
+        var printIframe = document.createElement('iframe');
+        printIframe.style.position = 'fixed';
+        printIframe.style.width = '0px';
+        printIframe.style.height = '0px';
+        printIframe.style.border = 'none'; // Make the iframe invisible
+        document.body.appendChild(printIframe);
+        // Write the modal content to the iframe
+        var iframeDoc = printIframe.contentWindow.document;
+        iframeDoc.open();
+
         fetch('/proxy.html', {
             method: 'POST',
             headers: {
@@ -222,7 +232,13 @@ document.addEventListener("DOMContentLoaded", function() {
             document.getElementsByClassName('close')[0].onclick = function() {
                 closePrintModal();
             };
+            iframeDoc.write(document.getElementById('modalPreviewContent').innerHTML);
+            iframeDoc.close();
+             // Wait for the content to load, then trigger the print dialog
+        printIframe.contentWindow.focus();
+        printIframe.contentWindow.print();
         })
+        
         .catch(error => {
             console.error('Error loading the print preview:', error);
         });
@@ -232,18 +248,8 @@ document.addEventListener("DOMContentLoaded", function() {
         var modal = document.getElementById('printModal');
         modal.style.display = "none";
         document.getElementById('modalPreviewContent').innerHTML = '';
-
-        // // Restore the original content or state
-        // if (originalContent) {
-        //     document.body = originalContent.cloneNode(true);
-        //     originalContent = null; // Clear the reference
-        // }
     }
 
-
-
-
-
     // Store initial positions of the blocks
     function storeInitialPositions() {
         const blocks = blockContainer.querySelectorAll('.block-item');

static/storeUI.css

@@ -192,24 +192,25 @@
   }
   
    /* Modal styling */
-  .modal {
-      display: none; /* Hidden by default */
-      position: fixed; /* Stay in place */
-      z-index: 1001; /* Sit on top */
+  /* .modal {
+      display: none; 
+      position: fixed; 
+      align-items: center;
+      z-index: 1001; 
       left: 0;
       top: 0;
-      width: 100%; /* Full width */
-      height: 100%; /* Full height */
-      overflow: auto; /* Enable scroll if needed */
-      background-color: rgb(0,0,0); /* Fallback color */
-      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+      width: 100%; 
+      height: 100%; 
+      overflow: auto; 
+      background-color: rgb(0,0,0); 
+      background-color: rgba(0,0,0,0.9); 
       }
   
   .modal-content {
       margin: auto;
       display: block;
-      width: 80%;
-      max-width: 700px;
+      width: 100%;
+      max-width: 730px;
       }
   
   .modal-content, #caption {
@@ -221,7 +222,7 @@
       from {transform: scale(0)}
       to {transform: scale(1)}
       }
-  
+   */
   .close {
       position: absolute;
       top: 15px;