SCHOL-905: Implement mobile designs

[jackiequach]

SCHOL-905

• Renames Header to Toolbar
• Splits the component into ViewControls, PageNavigation, and DocActions
• Toolbar uses container queries with a responsive grid layout that stacks nav/view/actions on mobile/tablet screens and switches to a single row (view | nav | actions) for desktop container widths
• Updates breakpoints to match DS breakpoints values

Screenshot

Testing

Vercel /pdf/fixed-height-embedded-collection

1. Build & pack this branch

cd web-reader
npm run build
rm -f nypl-web-reader-*.tgz  # clean up old builds if exists
npm pack                     # → nypl-web-reader-5.0.2.tgz

2. Install the tarball into the enhanced-search web app

cd ../enhanced-search/web
npm install ../../web-reader/nypl-web-reader-5.0.2.tgz
rm -rf .next
npm run dev

After testing, restore with: git checkout package.json package-lock.json && npm install.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
web-reader	Ready	Preview	Aug 26, 2026 8:31pm

[nprotheroNYPL]

Looks good, also fixes zIndex issue where toolbar is seen above mobile chat drawer.

On thing that I noticed is that on mobile and tablet sizes, while the toolbar is sticky, it gets covered by the PDF's content. Not sure what the desired interaction is, however this differs from desktop behavior.

[jackiequach]

On thing that I noticed is that on mobile and tablet sizes, while the toolbar is sticky, it gets covered by the PDF's content. Not sure what the desired interaction is, however this differs from desktop behavior.

Updated the toolbar to not be sticky on mobile/tablet sizes to maximize space.

[nprotheroNYPL]

Looks good