Responsive UI & Production Hardening
20 min read
Make the Reader and Annotations Responsive
Make the Reader and Annotations Responsive
Task
Finish responsive behavior for the Reader, Contents panel, Highlights, and Notes.
On narrow screens, make secondary panels occupy an appropriate overlay or stacked layout instead of shrinking the reading surface until it becomes unusable.
Preserve:
- Reader navigation
- Contents navigation
- Reader Settings
- passage opening from annotations
- search and filters
Do not change the feature behavior to solve a layout problem.
Test
Test at a phone-sized viewport and a desktop viewport.
Open:
- Contents
- Reader Settings
- Highlights
- Notes
Then navigate to a saved passage.
Checkpoint
Reading and annotation workflows remain usable at mobile and desktop widths.