fix(components): Prevent LightBox from duplicating content when the page is printed

jdeichert commented 4 months ago

Motivations

When opening a LightBox and then trying to print the page, the print preview dialog shows multiple pages of duplicated content will be printed. This is not what users are expecting.

This PR prevents that from happening and reduces it down to 1 single page as expected.

How it works

When toggling the LightBox, a class is toggled on the root html element. This class contains print-only styles that affect the html & body elements to guarantee they are fixed height and prevent overflowing content from causing multiple pages unnecessarily.

Risks

The risk is very low as these changes only affect print-mode and not normal browser behaviour!

Changes

Fixed

Add print-mode styles when LightBox is active to prevent duplication of content

Testing

See this comment for how I tested this: https://github.com/GetJobber/atlantis/pull/1951/files#r1666006525

You can also manually test this behaviour in JO by uploading a file to a job and injecting this script in the console:

const style = document.createElement("style");
style.textContent = `
html.atlantisLightboxPrintStyles {
  @media print {
    overflow: hidden;

    body {
      position: absolute;
      height: 100%;
      overflow: hidden;
    }
  }
}
`;
document.head.append(style);
document.documentElement.classList.add("atlantisLightboxPrintStyles");

Or even better, check out my JO PR with the pre-release bump and confirm it works there!

In Atlantis we use Github's built in pull request reviews.

github-actions[bot] commented 4 months ago

Published Pre-release for 88d6e56dd98872f8c87d63bef8ef39cd5a12f6e9 with versions:

  - @jobber/components@5.19.2-OPS-21139.1+88d6e56d

To install the new version(s) for Web run:

npm install @jobber/components@5.19.2-OPS-21139.1+88d6e56d

cloudflare-workers-and-pages[bot] commented 4 months ago

Deploying atlantis with Cloudflare Pages

Latest commit:	`3421355`
Status:	✅ Deploy successful!
Preview URL:	https://cbdd2d6a.atlantis.pages.dev
Branch Preview URL:	https://ops-21139-fix-print-mode-for.atlantis.pages.dev

View logs

GetJobber / atlantis