Project: mobile review overlay and scroll

Last updated: 5 Oct 20268 min read

project

Build a mobile case-review screen with a long activity feed, row action menu, modal note editor, and three reorderable evidence cards. The action menu must not clip inside the feed or rely on ever-larger z-index values. The note editor is modal: focus moves inside, background interaction follows the modal contract, Escape and a visible close control work, and focus returns to the invoking button. New activity appears without stealing a reviewer’s reading position. A New events control offers deliberate movement to the latest item. The evidence cards have Move up and Move down actions; drag can be an extra path, but cancellation cannot save a partial order. When the on-screen keyboard opens, the active field and save action remain reachable at zoomed and small sizes.

Build contract

Test clipping and paint order inside transformed and overflow-scrolling ancestors.
Insert delayed images and new events while a reviewer reads old history; preserve a stable anchor.
Cancel a touch drag and compare its result with keyboard and button reorder paths.
Open the note editor with software and hardware keyboards, zoom, rotation, and route transitions.

Implementation checkpoint

function applyReorder(evidenceIds, fromIndex, toIndex, canceled) {
  if (canceled) return evidenceIds;
  const nextIds = [...evidenceIds];
  nextIds.splice(toIndex, 0, ...nextIds.splice(fromIndex, 1));
  return nextIds;
}
console.log(applyReorder([47, 62, 89], 0, 2, true).join(","));
// Output: 47,62,89

Cost and boundaries

A reorder copies O(n) identifiers when committed, while pointer movement should update only a lightweight preview. Holding thousands of feed rows increases DOM memory and layout work; list windowing may reduce cost but makes focus and anchoring harder to preserve. Overlay positioning can trigger layout if it measures on every scroll frame, so batch reads and writes and remove listeners when closed. Record scroll displacement, modal focus return, field visibility, and interaction latency in addition to visual screenshots. A single desktop pass cannot verify keyboard or touch behavior.

Failure drill

Place the action menu under an overflow-clipped ancestor and raise z-index repeatedly; it must still be fixed at the correct placement boundary. Open the modal, scroll the feed, then close and confirm background scroll and focus return. Insert an image above the current event without reserved space; the current item should remain identifiable. Set touch-action none on the entire feed and see whether normal panning survives. Cancel a drag via pointercancel and confirm the server receives no mutation. Focus the last note field with a small visual viewport and confirm Save remains reachable. Repeat open and close to catch stale listeners.

Acceptance checks

Menus and modals have correct painting, dismissal, and focus behavior.
New content does not seize the reading position.
Reorder has equivalent button and keyboard paths with cancel rollback.
Focused fields and actions remain reachable with the on-screen keyboard.

Common Mistakes

Trying to solve clipping with a large z-index.
Auto-following every new event while the reader is in history.
Making drag the only reorder mechanism.
Using a fixed modal height that hides actions under the keyboard.

web-tech

web-development