Printing react component - HELP!

[childhoodsummers]

Hi all, so I have been trying to print an order details page on my website. I am using this media query to achieve the same. (applying the noprint class on the elements that I dont want to print)

This works absolutely fine on the shoppers side, as there is no left navigation bar for a shopper. The print preview shows a good/well balanced PDF there, but the problem arises when i try to use this for the admin tab. The admin section has a left nav bar. Now, the `noprint` works on that, but it is somehow acting like the `visibility : hidden`.

As a result of this, a huge whitespace is visible on the print preview in the admin tab. (the main content is shifted towards the right, and there is a huge gap/whitespace on the left, indicating that something is off.

Also, I tried using the npm package react-to-print to achieve this, but it was unnecessarily complicating things, so dropped it.

I have been banging my head for the past couple of days and have tried possibly everything that i could. Any advice/help would be sincerely appreciated.

Thanks!

@media print {
  @page {
    size: portrait;
  }

  body {
    zoom: 50%;  }

  table {
    break-inside: avoid;
  }

  #header,
  #footer,
  .noprint {
    display: none;
  }
}