SCHOL-305: Implement new web reader designs

[jackiequach]

Figma

Description

• Implements current page visible page number using page visibility and an intersection observer from this example.
• Move page navigation from Footer to Header and removes Footer component.
• Copies Tabs and Tooltip components from Reservoir (NYPL Design System). We are not installing the full design system to reduce bundle size.
• Adds fit to width and height functionality.
• Adds rotate functionality for PDF reader.
• Adds toggleFullScreen prop to WebReader for consuming apps to handle sizing of parent components. See example
• Updates Playwright test suite to run against localhost server instead of live Vercel site.

Screenshots

PDF reader header

EPUB reader header

Testing

Vercel preview "Fixed-height Embedded" for PDF and HTML readers

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web-reader	Ready	Preview, Comment	Feb 18, 2026 2:50pm

[alea12]

@jackiequach overall this looks good! Thank you for updating playwright test settings along the way.

One weird glitch I found... After rotation, the "next page" button does not work as expected.

• Navigate to https://web-reader-git-schol-305-implement-designs-nypl.vercel.app/pdf/fixed-height-embedded-collection
• Rotate counter-clockwise
• Hit next page button

Screen.Recording.2026-02-10.at.15.13.57.mov

[alea12]

Thank you @jackiequach, I think this is ready to go!