copilot generated: add media queries for print view (microsoft#11110)

Author: srietkerk

teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss

@@ -4,6 +4,10 @@
     align-items: flex-start;
     width: 100%;
 
+    @media print {
+        page-break-inside: avoid;
+    }
+
     div[class*="common-input-group"] {
         border-radius: 0.5rem;
         border: solid 1px var(--pxt-neutral-foreground1);
@@ -177,6 +181,11 @@
         width: 100%; // For non-webkit browsers
         width: -webkit-fill-available; // Webkit browsers
 
+        @media print {
+            width: 100%;
+            color: #333333;
+        }
+
         &.for-print {
             font-style: italic;
         }

teachertool/src/components/styling/EvalResultDisplay.module.scss

@@ -3,6 +3,13 @@
     padding: 1rem;
     overflow: auto;
     container-type: inline-size;
+
+    @media print {
+        height: auto;
+        overflow: visible;
+        container-type: normal;
+        padding: 0.5rem;
+    }
 }
 
 .checklist-control-tray {
@@ -83,6 +90,12 @@
     width: 100%; // For non-webkit browsers
     width: -webkit-fill-available; // Webkit browsers
     padding: 0.5rem;
+
+    @media print {
+        width: 100%;
+        padding: 0;
+        page-break-inside: avoid;
+    }
 }
 
 .specific-criteria-result {
@@ -95,6 +108,12 @@
     min-height: 9rem;
     gap: 0.5rem;
 
+    @media print {
+        width: 100%;
+        min-height: unset;
+        page-break-inside: avoid;
+    }
+
     .loading-display {
         padding-top: 0;
         flex-grow: 1;
@@ -167,6 +186,11 @@
     margin-top: 0.5rem;
     width: 100%; // For non-webkit browsers
     width: -webkit-fill-available; // Webkit browsers
+
+    @media print {
+        width: 100%;
+        border-bottom-color: #000000;
+    }
 }
 
 .result-details {
@@ -178,6 +202,11 @@
     height: 50%;
     gap: 0.5rem;
 
+    @media print {
+        height: auto;
+        page-break-inside: avoid;
+    }
+
     .display-string {
         font-weight: 500;
         padding-right: 0.5rem;
@@ -220,6 +249,11 @@
     min-height: 5.5rem;
     gap: 0.5rem;
 
+    @media print {
+        min-height: unset;
+        page-break-inside: avoid;
+    }
+
     .notes-container {
         width: 100%;
         max-width: 100%;
@@ -258,6 +292,11 @@
     justify-content: space-between;
     padding: 0.5rem 0;
 
+    @media print {
+        page-break-after: avoid;
+        page-break-inside: avoid;
+    }
+
     .checklist-name {
         display: flex;
         flex-direction: row;

teachertool/src/global.scss

@@ -129,6 +129,19 @@ code {
         break-before: avoid;
     }
 
+    // Ensure body and html don't constrain the print layout
+    html, body {
+        height: auto !important;
+        overflow: visible !important;
+    }
+
+    // Fix for webkit browsers (Safari)
+    body {
+        width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
     .no-print {
         display: none !important;
     }