BUG: Printing PDF results in cropped PDF

[tayv]

The problem:

• Clicking Print in the modal results in the print dialog firing but it loads only a cropped version of the first page. Following pages are not included.

Example:

Other Notes:

• Using react-to-print library to select the component. This was previously working with an MDX only document. It does select the PDF but the result is cropped
• Using react-pdf renderer to render the PDF
• Previous POC used pdf.js. Confirm it was removed.
• Other methods for react-pdf

[tayv]

handlePrint uses the react-to-print libraries useReactToPrint hook. This requires a ref to print the iframe.

This is likely the reason why it's printing incorrectly because the ref is attached to the wrapping div instead of DynamicPDF component.

 <div
    ref={pdfRef}
    className={
      "lg:max-h-[80vh] lg:w-[50vw] w-full max-w-screen-lg print:max-h-none select-none"
    }
  >
    {/* Need to pass formData directly as prop instead of useFormContext() or passing all methods because PDFViewer creates a separate context */}
    <PDFViewer style={pdfStyles.pdfViewer}>
      <DynamicPDF formData={testData} />
    </PDFViewer>
 </div>