CodingNic

Responsive UI & Production Hardening

Make the Reader and Annotations Responsive

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.