fix(pdf-viewer): add mobile enhancements to PDF Viewer

[proeung]

Issue

Fixes - https://jira.sdlc.merative.com/browse/MERATIVE-805

Description

Changed

• This PR adds the following changes to the PDF viewer block
  • Page without the PDF download button: Defaults to INLINE Mode and the PDF viewer frame is visible on mobile
  • Page with PDF down button: Defaults to the frame mode on desktop, but hidden on mobile

Design Specs

• Figma Link - N/A

Test URLs

Embed Mode: Inline without "Download PDF" button

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/drafts/putra/payers-weight-loss-drugs
• After (Changes from this PR): https://pdf-viewer--merative2--hlxsites.hlx.page/drafts/putra/payers-weight-loss-drugs

Embed Mode: Full-Window/Default with "Download PDF" button

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/documents/case-study/health-insights-identify-savings-speciality-conditions
• After (Changes from this PR): https://pdf-viewer--merative2--hlxsites.hlx.page/documents/case-study/health-insights-identify-savings-speciality-conditions

Testing Instruction

• Page without the PDF download button: Defaults to INLINE Mode and the PDF viewer frame is visible on mobile
  • Visit this draft page (https://pdf-viewer--merative2--hlxsites.hlx.page/drafts/putra/payers-weight-loss-drugs)
  • Ensure that the inline embed mode is being displayed on mobile

• Page with PDF down button: Defaults to the frame mode on desktop, but hidden on mobile
  • Visit this page (https://pdf-viewer--merative2--hlxsites.hlx.page/documents/case-study/health-insights-identify-savings-speciality-conditions)
  • Ensure that the PDF viewer is not visible on Mobile and Tablet, just like this inspiration site

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/documents/case-study/health-insights-identify-savings-speciality-conditions
/drafts/putra/payers-weight-loss-drugs

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/documents/case-study/health-insights-identify-savings-speciality-conditions
/drafts/putra/payers-weight-loss-drugs

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/documents/case-study/health-insights-identify-savings-speciality-conditions
/drafts/putra/payers-weight-loss-drugs

[proeung]

@sharathmrft Thanks for testing this PR, however, I just wanted to note that Chrome mobile emulator within the desktop browser doesn't give a true representation of what the mobile experience will be like on actual devices, which explains why your screenshot doesn't have the PDF shown. I just tested the PDF Embed viewer without the download button on my mobile device and it renders correctly (see attached).

On a different note, @keith-kaplan would you like me to merge these changes down or should we hold off until we confirm this update with Audrey & Caroline?

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/documents/case-study/health-insights-identify-savings-speciality-conditions
/drafts/putra/payers-weight-loss-drugs