Most printing issues fixed

examples/Demo/Shared/Pages/Home/Videos.razor

@@ -10,14 +10,18 @@
 
 <FluentGrid Spacing="7">
     <FluentGridItem xs="12" sm="4">
-        <div class="youtube-title">.NET Conf 2024</div>
-            <div class="youtube-responsive">
+        <div class="youtube-title">.NET Conf 2024
+        </div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=w8BKS1a8MnU">https://www.youtube.com/watch?v=w8BKS1a8MnU</a></p>
+
+        <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/w8BKS1a8MnU?si=ugsYLTHGhBrXdAhn" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
             </div>
     </FluentGridItem>
 
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title">ASP.NET Community Standup 2024</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=1fveBAi6Q7I">https://www.youtube.com/watch?v=1fveBAi6Q7I</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/1fveBAi6Q7I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
@@ -27,24 +31,28 @@
 
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title" style="overflow: unset;">Open at Microsoft - 2024</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=lUZ5mrg2Q8k">https://www.youtube.com/watch?v=lUZ5mrg2Q8k</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title"></div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=jOv9ioCVDFU">https://www.youtube.com/watch?v=jOv9ioCVDFUI</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/jOv9ioCVDFU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title"></div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=HTUemhV9W-M">https://www.youtube.com/watch?v=HTUemhV9W-M</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/HTUemhV9W-M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title">.NET Conf 2023</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=a0xOqNemRoY">https://www.youtube.com/watch?v=a0xOqNemRoY</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/a0xOqNemRoY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>

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

@@ -589,3 +589,100 @@ kbd {
     .youtube-thumbnail img {
         width: 100%;
     }
+
+
+@media print{
+    pre, code {
+        white-space: pre-wrap !important;
+        word-wrap: break-word !important;
+    }
+
+    body {
+        overflow: visible !important;
+        height: auto !important;
+    }
+
+    .body-content{
+        overflow: visible !important;
+        max-height: 100% !important;
+    }
+
+    h2:nth-of-type(n+2) {
+        page-break-before: always !important;
+    }
+
+
+    h3, h4, h5, h6 {
+        page-break-after: avoid !important;
+    }
+
+    fluent-tab-panel{
+        page-break-inside: avoid !important;
+    }
+
+    .navmenu, .siteheader, aside {
+        visibility: hidden !important;
+        height: 0 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    .layout > footer {
+        visibility: hidden !important;
+        height: 0 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+
+    a::after {
+        content: " (" attr(href) ")";
+        font-size: 12px;
+        color: #555;
+    }
+
+    .youtube-title {
+        font-weight: bold;
+        font-size: 16pt;
+        margin-bottom: 5px;
+    }
+
+    .youtube-responsive {
+        display: none !important; /* Hide embedded videos */
+    }
+
+    fluent-tab-panel {
+        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 */
+    }
+
+    button, .FluentButton {
+        display: none !important;
+    }
+
+    article {
+        padding: 0 !important;
+        border-right: hidden !important;
+    }
+
+    .video-link {
+        display: block;
+        font-size: 12pt;
+        color: black;
+    }
+}
+
+@media screen {
+    .video-link {
+        display: none;
+    }
+}