tuning up print styles

src/app/app.component.html

@@ -4,7 +4,7 @@
       <mat-toolbar-row>
         <span>{{title}}</span>
         <span class="example-spacer"></span>
-        <button mat-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon><span class="visuallyhidden">Open/Close Menu</span></button>
+        <button mat-button (click)="sidenav.toggle()" class="dontprint"><mat-icon>menu</mat-icon><span class="visuallyhidden">Open/Close Menu</span></button>
       </mat-toolbar-row>
     </mat-toolbar>
     <mat-sidenav-container hasBackdrop="true">

src/app/graph/graph.component.html

@@ -94,7 +94,7 @@
       </div>
       <div class="graph-columns" margin-right="0px">
           <mat-card class="fill-graph">
-            <div class="settings-row">
+            <div class="settings-row dontprint">
               <div class="settings-row" fxFlex="1 0 auto" fxLayout="row" fxFlexFill>
                 <span class="example-spacer"></span>
                 <div class="setting">
@@ -195,7 +195,7 @@
             </div>
           </mat-card>
       </div>
-      <button mat-button class="filter-pin" [class.filter-hidden]="hideFilter" (click)="toggleShowFilter()"><mat-icon>push_pin</mat-icon><span class="visuallyhidden">Open/Close Filter</span></button>
+      <button mat-button class="filter-pin dontprint" [class.filter-hidden]="hideFilter" (click)="toggleShowFilter()"><mat-icon>push_pin</mat-icon><span class="visuallyhidden">Open/Close Filter</span></button>
       <button mat-button class="error-icon" [class.error-hidden]="!graphService.anyErrors" (click)="dialogService.openDialog('errors')"><mat-icon>error</mat-icon><span class="visuallyhidden">Show Errors</span></button>
     </div>
   </div>

src/styles.css

@@ -27,16 +27,24 @@ body {
   width: 1px;
 }
 
+/*
+    Custom print style overrides.
+    In Chrome, you must use "Save as PDF" on the print dialog, not "Microsoft Print as PDF".
+    Microsoft Print as PDF has known issues https://stackoverflow.com/a/66017274
+*/
 @media print {
+
+  /* put this class on stuff that should not be printed */
   .dontprint {
     display: none !important;
   }
 
   body {
-    zoom: 60%;
-    -webkit-print-color-adjust: exact;
+    zoom: 60%; /* zoom to fit 3 columns across 1 page */
+    -webkit-print-color-adjust: exact; /* this is needed to reproduce background/font colors in the pdf */
   }
 
+  /* disable all the vertical overflow/height locking from the graph */
   .zoom-viewport {
     height: unset !important;
   }
@@ -49,6 +57,7 @@ body {
   .mat-drawer-content {
     position: unset !important;
     height: unset !important;
+    padding: unset !important; /* this padding is redundant to page margin in a print */
   }
 
   .mat-drawer-container {
@@ -60,11 +69,17 @@ body {
     overflow: unset !important;
   }
 
-  .angular-tree-component {
-    -webkit-touch-callout: unset !important;
-    -webkit-user-select: unset !important;
-    -moz-user-select: unset !important;
-    -ms-user-select: unset !important;
-    user-select: unset !important;
+  /*
+    These are attempts to fix the page cutting off text during "save as pdf".
+    None of them are effective yet for some reason.
+
+  .node-wrapper {
+    position: relative !important;
+    page-break-inside: avoid !important;
   }
+  .node-content-wrapper {
+    position: relative !important;
+    page-break-inside: avoid !important;
+    display: inline-block !important;
+  }*/
 }