When I click on "Open PDF in Preview" after triggering the print dialog using the react-to-print component in my React app, the right side of the PDF gets cut off.

Setup: I am using react-to-print to generate a printable view. The ComponentToPrint is wrapped inside a hidden div and passed as a reference to content(). The print preview shows the full content, but when I open the PDF in Preview, part of the right side is missing.

Code Snippet: React-to-Print Implementation-

<ReactToPrint
    documentTitle={'Sample pdf'}
    trigger={() => <></>}
    content={() => componentRef.current}
    ref={printRef}
    onAfterPrint={() => {
      setStateData(prev => { return { ...prev, isPrintComponentRender: false, startRenderPrintComponent: false } });
    }}
    print={async (target) => {
      return new Promise<any>((resolve) => {
        target?.contentWindow?.print?.();
        resolve(true);
      });
    }}
    removeAfterPrint={true}
/>
<div style={{ display: 'none' }}>
    <ComponentToPrint ref={componentRef} footer={''}> 
        {renderPrintComponent} 
    </ComponentToPrint>
</div>

ComponentToPrint-

return (
  <View ref={ref}>
    <table width="100%">
      <thead>
        <tr>
          <td ref={headerRef}>{renderHeader()}</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div className="content">{props.children}</div></td>
        </tr>
      </tbody>
    </table>
  </View>
);

on mac os print dialog view
print preview

• Tried setting width: 100% in ComponentToPrint to ensure it fits within the page.

• Used overflow: hidden to prevent content from exceeding the page.

• Tested different print margin settings.

Why is the right side of my PDF getting cut off when opened in Preview? How can I ensure the entire content is visible?
The entire content should appear properly formatted in the Preview PDF, just as it does in the print dialog.

Any insights would be appreciated!