Capablio

Handbook

Prompt 03A - Responsive shell and deterministic state evidence

Run with or immediately after Prompt 03.

Updated

Prompt

Use the second screenshot pack as a defect baseline and make responsive behavior and visual evidence part of the product contract.

1. Product shell

At narrow widths:

  • replace the permanently expanded sidebar with an accessible drawer or compact navigation pattern
  • keep tenant, user, and privileged-session context available without consuming the first viewport
  • provide skip navigation and predictable focus return
  • prevent background scroll while the drawer is open
  • preserve workspace switching without exposing irrelevant roles

2. Mobile page patterns

Implement and test:

  • tables with a documented narrow-screen strategy: card list, priority columns, or controlled horizontal scroll
  • sticky filter/action bars only when they do not obscure content
  • stacked forms with full-width controls
  • drawers/dialogs that fit 320 px width and 400 percent zoom
  • survey composer fixed near the active question with safe-area handling
  • progress and save/resume state visible without scrolling to the top
  • admin detail pages with tabs, accordions, or drawers instead of multi-screen inline dumps

3. State fixtures

Create deterministic fixtures for every screenshot state. A capture must assert expected text or landmarks before taking the image.

Include at minimum:

  • multiple survey assignments with the picker visible
  • a scale question with anchors and Not observed
  • an open-text question
  • saved/resumed survey
  • PDP in progress and finalized goals
  • campaign with missing groups, failed delivery, and ready-to-close states
  • empty, loading, error, 403, and success states

Fail the capture job when the expected state is absent. Do not accept a differently signed-in user as proof that a distinct workflow state rendered.

4. Viewports and tests

Capture and test at:

  • 390 x 844
  • 768 x 1024
  • 1024 x 768
  • 1280 x 800
  • 1440 x 900 where supported

Also test 200 and 400 percent zoom, keyboard navigation, reduced motion, and long localized labels.

Acceptance gates

  • Navigation does not consume most of the first mobile viewport.
  • No required table value or action is silently clipped.
  • The assignment-picker screenshot visibly contains two or more assignments.
  • Every reference screenshot is tied to a deterministic fixture and assertion.