Fix for really large images in print mode

examples/Demo/Shared/wwwroot/css/site.css

@@ -19,36 +19,36 @@ blockquote p:last-child {
     margin-bottom: 0 !important;
 }
 
-    .siteheader .logo {
-        width: 108px;
-        height: 23px;
-        grid-column: 1;
-    }
+.siteheader .logo {
+    width: 108px;
+    height: 23px;
+    grid-column: 1;
+}
 
-    .siteheader .search {
-        display: flex;
-        align-items: center;
-        padding-right: 20px;
-    }
+.siteheader .search {
+    display: flex;
+    align-items: center;
+    padding-right: 20px;
+}
 
-    .siteheader .links {
-        padding-right: 10px;
-        display: flex;
-        align-items: center;
-    }
+.siteheader .links {
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+}
 
-    .siteheader .notifications {
-        display: flex;
-        align-items: center;
-    }
+.siteheader .notifications {
+    display: flex;
+    align-items: center;
+}
 
-    .siteheader .settings {
-        padding-right: 6px;
-        display: flex;
-        align-items: center;
-        margin-left: 0;
-        margin-right: 10px;
-    }
+.siteheader .settings {
+    padding-right: 6px;
+    display: flex;
+    align-items: center;
+    margin-left: 0;
+    margin-right: 10px;
+}
 
 [dir="rtl"] .siteheader .settings {
     padding: 0 0 0 6px;
@@ -82,19 +82,19 @@ blockquote p:last-child {
     margin-top: 0px !important;
 }
 
-    .footer .version a {
-        color: var(--neutral-foreground-rest);
-        text-decoration: none;
-    }
+.footer .version a {
+    color: var(--neutral-foreground-rest);
+    text-decoration: none;
+}
 
-        .footer .version a:focus {
-            outline: 1px dashed;
-            outline-offset: 3px;
-        }
+.footer .version a:focus {
+    outline: 1px dashed;
+    outline-offset: 3px;
+}
 
-        .footer .version a:hover {
-            text-decoration: underline;
-        }
+.footer .version a:hover {
+    text-decoration: underline;
+}
 
 
 nav.sitenav {
@@ -126,10 +126,10 @@ nav fluent-anchor {
     color: var(--fill-color);
 }
 
-    nav fluent-anchor::part(control) {
-        justify-content: start;
-        background: var(--accent-fill-rest);
-    }
+nav fluent-anchor::part(control) {
+    justify-content: start;
+    background: var(--accent-fill-rest);
+}
 
 
 .fluent-nav-link.notactive .fluent-nav-text {
@@ -145,12 +145,12 @@ ul.news {
     list-style-type: none;
 }
 
-    ul.news li {
-        display: flex;
-        gap: calc( var(--design-unit) * 2px);
-        align-items: center;
-        padding-bottom: calc( var(--design-unit) * 2px);
-    }
+ul.news li {
+    display: flex;
+    gap: calc(var(--design-unit) * 2px);
+    align-items: center;
+    padding-bottom: calc(var(--design-unit) * 2px);
+}
 
 .news .calendar {
 
@@ -164,7 +164,6 @@ ul.news {
 }
 
 
-
 article {
     padding: 1.5rem 1rem;
     border-right: 1px solid var(--neutral-stroke-divider-rest);
@@ -232,9 +231,9 @@ code {
     background-color: var(--accent-stroke-control-active);
 }
 
-    .highlighted > td {
-        color: var(--neutral-fill-inverse-rest);
-    }
+.highlighted > td {
+    color: var(--neutral-fill-inverse-rest);
+}
 
 
 kbd {
@@ -260,22 +259,22 @@ kbd {
     color: var(--neutral-foreground-rest);
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
 
 .blazor-error-boundary {
     border: 1px dashed var(--error);
     background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDgnIGhlaWdodD0nNDgnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIG92ZXJmbG93PSdoaWRkZW4nIGZpbGw9JyNCQzJGMzInPjxwYXRoIGQ9J00yNCA0YTIwIDIwIDAgMSAwIDAgNDAgMjAgMjAgMCAwIDAgMC00MFptMCA5Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djEyLjVhMS4yNSAxLjI1IDAgMSAxLTIuNSAwdi0xMi41YzAtLjY5LjU2LTEuMjUgMS4yNS0xLjI1Wm0wIDIxYTIgMiAwIDEgMSAwLTQgMiAyIDAgMCAxIDAgNFonPjwvcGF0aD48L3N2Zz4=") no-repeat 1rem/1.8rem;
     padding: 1rem 1rem 1rem 3.7rem;
 }
 
-    .blazor-error-boundary::before {
-        content: "An error has occurred: "
-    }
+.blazor-error-boundary::before {
+    content: "An error has occurred: "
+}
 
 /* Animate the blazor FluentUI during the loading */
 .loading-progress {
@@ -328,9 +327,9 @@ kbd {
     margin-top: 80px;
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
+.loading-progress-text:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
 
 @media (max-width: 767px) {
 
@@ -341,15 +340,15 @@ kbd {
         justify-content: flex-start;
     }
 
-        .siteheader .search {
-            display: none;
-        }
+    .siteheader .search {
+        display: none;
+    }
 
-        .siteheader .logo {
-            width: 160px;
-            height: 23px;
-            /*padding: 0 25px;*/
-        }
+    .siteheader .logo {
+        width: 160px;
+        height: 23px;
+        /*padding: 0 25px;*/
+    }
 
 
     .body-stack {
@@ -422,16 +421,16 @@ kbd {
         grid-template-columns: 10px auto 10px;
     }
 
-        .footer .version {
-            grid-column: 2;
-            justify-self: start;
-        }
+    .footer .version {
+        grid-column: 2;
+        justify-self: start;
+    }
 
-        .footer .copy {
-            grid-column: 2;
-            grid-row: 2;
-            justify-self: end;
-        }
+    .footer .copy {
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: end;
+    }
 
 
     @media screen and (max-width: 767px) and (orientation: landscape) {
@@ -440,9 +439,9 @@ kbd {
             padding: 25px 40px;
         }
 
-            nav ul {
-                margin: 0 0;
-            }
+        nav ul {
+            margin: 0 0;
+        }
     }
 }
 
@@ -483,17 +482,17 @@ kbd {
         background-color: var(--neutral-layer-4);
     }
 
-        .siteheader a {
-            padding: 0px 15px;
-            color: var(--neutral-foreground-rest);
-        }
+    .siteheader a {
+        padding: 0px 15px;
+        color: var(--neutral-foreground-rest);
+    }
 
-        .siteheader .logo {
-            grid-column: 1;
-            width: 108px;
-            height: 23px;
-            /*padding: 0 30px;*/
-        }
+    .siteheader .logo {
+        grid-column: 1;
+        width: 108px;
+        height: 23px;
+        /*padding: 0 30px;*/
+    }
 
     main {
         display: grid;
@@ -529,7 +528,6 @@ kbd {
 }
 
 
-
 @media (min-width: 800px) {
     .fluent-dialog-main {
         --dialog-width: 340px;
@@ -557,19 +555,19 @@ kbd {
     max-width: 100%;
 }
 
-    .youtube-responsive iframe,
-    .youtube-responsive object,
-    .youtube-responsive embed {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
+.youtube-responsive iframe,
+.youtube-responsive object,
+.youtube-responsive embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 
-    .youtube-responsive .fluid-vids {
-        position: initial !important
-    }
+.youtube-responsive .fluid-vids {
+    position: initial !important
+}
 
 .youtube-title {
     font-weight: bold;
@@ -586,12 +584,12 @@ kbd {
     max-width: 100%;
 }
 
-    .youtube-thumbnail img {
-        width: 100%;
-    }
+.youtube-thumbnail img {
+    width: 100%;
+}
 
 
-@media print{
+@media print {
     pre, code {
         white-space: pre-wrap !important;
         word-wrap: break-word !important;
@@ -602,7 +600,7 @@ kbd {
         height: auto !important;
     }
 
-    .body-content{
+    .body-content {
         overflow: visible !important;
         max-height: 100% !important;
     }
@@ -616,7 +614,7 @@ kbd {
         page-break-after: avoid !important;
     }
 
-    fluent-tab-panel{
+    fluent-tab-panel {
         page-break-inside: avoid !important;
     }
 
@@ -656,13 +654,13 @@ kbd {
     }
 
     fluent-tab-panel {
-        display: block !important;   /* Make all tab panels visible */
+        display: block !important; /* Make all tab panels visible */
         visibility: visible !important;
         page-break-inside: avoid !important;
     }
 
     fluent-tab-panel[hidden] {
-        display: block !important;  /* Override hidden attribute */
+        display: block !important; /* Override hidden attribute */
     }
 
     button, .FluentButton {
@@ -679,8 +677,15 @@ kbd {
         font-size: 12pt;
         color: black;
     }
+
+    img {
+        width: auto !important; /* Shrinks oversized images */
+        max-height: 250px !important; /* Limits vertical size */
+        display: block; /* Prevents inline scaling issues */
+    }
 }
 
+
 @media screen {
     .video-link {
         display: none;