[lstein]

On phones, the Control and Search panels at the bottom of the window and the album badge and seek slider at the top were hard to use. This folds them into two slide-up sheets, in the style of Google Maps on the iPhone, and moves the metadata drawer into the bottom sheet.

Phone layout

The layout switches on at 600px wide and below, or 500px tall and below on a touch screen (phones held sideways). Desktop and tablet layouts are unchanged.

• Bottom sheet: holds both panels.
  • It has three stops: collapsed (just the handle), controls, and details.
  • At the controls stop, the file name and path sit below the panels. Tapping that row, pulling the sheet higher, or swiping up on the photo opens the details stop.
  • The details stop shows what the drawer showed (tags, Image Details, the InvokeAI buttons) over the photo, and scrolls.
  • Held sideways, the two panels share one row.
  • The sheet remembers whether you left it collapsed or open to the controls. It never reopens to the details after a reload.
• Top sheet: holds the album badge and a full-width seek slider.
  • Collapsed, only the progress strip and a handle show.
  • The slider stays open as long as the sheet does.
• Gestures:
  • Drag or flick from anywhere on a sheet, including from a button; the drag doesn't press it. A flick moves the sheet one stop.
  • Dragging the slider thumb seeks rather than moving the sheet.
  • Inside the details, dragging scrolls them; once they're scrolled to the top, dragging down moves the sheet.
• Keyboard: i, ↑, ↓ and Esc open and close the details.

Layout around the sheets

• Grid view: tiles stop above the sheet and are laid out again when it moves.
• Semantic map: in fullscreen it stays clear of the sheet.
• Text search box: sits above the sheet in one column, and closes when the details open.
• Metadata table: the label column gets 30% of the width, so labels no longer break mid-word.
• iPadOS viewport fix: panel-anchor.js also publishes how far the stranded iPadOS layout viewport hangs below the visible one, so the sheet clears it too.

Testing

• Jest: new suites mobile-sheets, mobile-sheets-details, seek-slider-sheet and metadata-drawer-sheet. All 1140 frontend tests pass; lint and format checks are clean.
• Headless Chromium: checked at 390×760, 667×375, 740×340 and 844×390 (gestures by touch emulation), and at desktop size.
• On an iPhone: the user tried an earlier build. The latest fixes (the hand-off between scrolling and dragging in the details, the landscape row) haven't been tried on a device yet. WebKit couldn't run headless on the build machine.
• Adversarial review: a fresh-context review was run, and its confirmed findings are fixed here:
  • landscape panels wrapped onto two rows;
  • the details could open unseen while in fullscreen;
  • the user's next tap after a touch drag was swallowed;
  • the fullscreen map didn't re-fit when the sheet moved;
  • the text search box was lifted twice on a stranded iPad viewport;
  • a change in the sheet's height (e.g. panel labels turned on) wasn't announced;
  • a stale mouse drag could move the sheet later;
  • a late date lookup could re-show the slider's date bubble.

🤖 Generated with Claude Code