The Studio reads on a phone as on a desktop

actor

A person reviewing a design on a phone, including a pull request reviewer who holds only a link.

outcome

Let a design be reviewed on a phone through the same pages a desktop shows.

rule line 19 · specs/consumers/spec-studio.responsive.sdp.md:19

Every page of the Studio is responsive, so the same pages serve a desktop and a phone.

1 unkeyed rule.

Example space

Given a Studio page whose layout holds {wideColumns:number} columns
When the page is shown {width:number} pixels wide
Then the layout holds {columns:number} columns

singleColumn line 22 · specs/consumers/spec-studio.responsive.sdp.md:22

every layout collapses to one column below 720 CSS pixels of viewport width; at 390 CSS pixels no page exceeds the viewport. The top navigation and stamp line wrap, and a table wider than its column scrolls inside its own container, including maturity maps, run results and coverage tables; queue rows wrap within their column.

pinchZoom line 23 · specs/consumers/spec-studio.responsive.sdp.md:23

on a touch device, every diagram zooms with a pinch, which the diagram element adds.

narrowDiagram line 24 · specs/consumers/spec-studio.responsive.sdp.md:24

below the same width a diagram opens scaled to the screen's width, with its zoom controls above it and its text equivalent below it, and draws the same boxes and edges a desktop draws.

Verifier bindings

• test:protocol.studio-intent-handoff · anchored · test anchor binding present · test/studio-s5.test.ts:407

  External run evidence from test/studio-s5.test.ts

  Test anchors: test:protocol.studio-export-contained, test:protocol.studio-intent-handoff, test:protocol.studio-intents-refresh, test:protocol.studio-memo-shared, test:protocol.studio-watch-plain. Specs verified by those bindings: spec:consumers.edit-model, spec:consumers.intent-composition, spec:consumers.intent-composition.proposal.memo, spec:consumers.intent-composition.proposal.memo.shared, spec:consumers.spec-studio.components, spec:consumers.spec-studio.export, spec:consumers.spec-studio.export.self-contained, spec:consumers.spec-studio.intent-panel, spec:consumers.spec-studio.intent-panel.refresh-keeps-intents, spec:consumers.spec-studio.publisher.watch, spec:consumers.spec-studio.publisher.watch.matches-plain-run, spec:consumers.spec-studio.responsive.

  Run 1: external run evidence from vitest 4.1.10

  Build: CI 391 · Branch: cursor/media-plan-and-articles-09b1 · Commit: 076cd4f1f85640d8236e5cca1bffffa68ab79a33 · Start: 2026-10-31T15:32:20.471Z · Stop: 2026-10-31T15:34:02.073Z

  Name	Suite	Result	Duration
  executes the bound example against a fresh world	Refreshing a tab keeps every gathered intent (spec:consumers.spec-studio.intent-panel.refresh-keeps-intents)	passed	9.92 ms
  executes the bound example against a fresh world	Recipe 49 and the composing panel write one memo for one proposal (spec:consumers.intent-composition.proposal.memo.shared)	passed	4.43 ms
  executes the bound example against a fresh world	A Pack's export opens alone and keeps its links inside it (spec:consumers.spec-studio.export.self-contained)	passed	63.32 ms
  executes the bound example against a fresh world	Each watch cycle writes the page set a plain run writes (spec:consumers.spec-studio.publisher.watch.matches-plain-run)	passed	124.81 ms
  keeps unsupported intents apart and expands Pack members only against the stamped base	not recorded	passed	2.27 ms
  returns the same schema problems as recipe 38 and renders in any corpus	not recorded	passed	10.03 ms
  composes locally without changing source or requesting a network service	not recorded	passed	1.54 ms
  keeps the last local intents when storage refuses writes	not recorded	passed	0.29 ms
  keeps unsaved local intents when storage remains readable but its quota refuses writes	not recorded	passed	0.27 ms
  rewrites SVG and accessibility references without changing subject attributes or authored text	not recorded	passed	6.38 ms
  opens disclosures for print and restores exactly their prior state	not recorded	passed	1.43 ms
  leaves Mermaid source closed for print unless the reader opened it	not recorded	passed	1.06 ms
  stops the actual Studio watch process with exit zero on SIGINT	not recorded	passed	491.48 ms
  removes a failed watch publication, keeps watching and recovers on the next carrier edit	not recorded	passed	33.93 ms
  ships a phone layout and a print stylesheet for the whole canvas	not recorded	passed	10.85 ms
  keeps exports graph-only when the browsing pages receive a base and run records	not recorded	passed	27 ms
  starts no cycle for source or input-file events	not recorded	passed	30.93 ms
  merges concurrent panels before gathering or discarding and flags rejected storage records	not recorded	passed	0.6 ms
  refreshes the browser panel on storage and pageshow and removes those listeners on disconnect	not recorded	passed	1.47 ms
  prefills compose with the authored entry text including code spans and no rendered annotations	not recorded	passed	15.53 ms
  omits blank exact text and reports whitespace requests in the compose dialog	not recorded	passed	2.42 ms
  uses the stamp base, labels fields, orders actions and copies and saves the named documents	not recorded	passed	5.09 ms
  copies distinct actions and recorded scopes for both Pack choices without a stamp	not recorded	passed	2.97 ms
  keeps Pack framing changes apart and gathers scenario editor steps verbatim	not recorded	passed	2.66 ms
  matches the literal memo for the shared proposal, including the full relation and document	not recorded	passed	0.93 ms
  keeps the last watch pages when an optional base becomes unreadable, just like a plain run	not recorded	passed	986.18 ms
  inlines the selected stylesheet asset in exports and publishes those same style bytes	not recorded	passed	25.93 ms
  introduces studio before its watch option and gives recipe 49 a use case	not recorded	passed	4.36 ms
  renders edit scenario steps outside inert templates without script	not recorded	passed	1.08 ms
  renders propose scenario steps outside inert templates without script	not recorded	passed	0.72 ms
  writes both memo reasons as code spans: "<details>Review the design.</details>", "`Keep` the ``literal`` reason`"	not recorded	passed	0.7 ms
  writes both memo reasons as code spans: "`Review` the ``design`` reason`", "<details>Keep the change.</details>"	not recorded	passed	0.43 ms
  fences requests so their Markdown cannot alter the memo: "Fix a typo.\n<!--"	not recorded	passed	0.89 ms
  fences requests so their Markdown cannot alter the memo: "Use this text.\n```\n## Forged heading\n``````\n<!--hidden-->"	not recorded	passed	0.7 ms
  contains phone navigation, stamp and wide tables within the viewport	not recorded	passed	15.39 ms
  keeps the maturity caption readable and empty cells compact on a phone	not recorded	passed	7.6 ms
  aligns maturity cell counts with the empty cell dashes	not recorded	passed	4.92 ms
  keeps table headers and one-word cells intact while allowing word-boundary wrapping	not recorded	passed	7.32 ms
  keeps natural desktop diagram size and fits only on phones	not recorded	passed	7.69 ms
  hides phone scroll advice and closed source in print while keeping opened source printable	not recorded	passed	18.32 ms

Requirement drawing

• Declared verifying examples: no declared verifying example.

Decisions

No decision record named.

• component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  • component:protocol.extract · the carrier and source pipeline · src/extract/index.ts:192 · layer application · context protocol
  • component:protocol.graph · the one graph and its semantic decisions · src/graph/schema.ts:34 · layer domain · context protocol
  • component:protocol.model · the authored contracts and stable ids · src/model/anchors.ts:100 · layer domain · context protocol
  • component:protocol.notation · the leaf step codec · src/notation/slots.ts:261 · layer domain · context protocol
  • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
  • component:protocol.validate · one finding currency and ordered checks · src/validate/validators.ts:72 · layer domain · context protocol
• component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  • component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol
  • component:protocol.reader · the typed graph contract and body evaluator · src/reader/reader.ts:671 · layer application · context protocol
• impl:protocol.studio-diagram-element · adds view-box pan, zoom and pinch to build-rendered SVG without changing its layout · src/studio-elements/diagram.ts:23

  Component: component:protocol.studio-elements · optional browser behavior and proposal handoff · src/studio-elements/index.ts:13 · layer edge · context protocol

  Uses

  None.

• impl:protocol.studio-frame · renders Studio navigation, page rails and composing controls · src/projections/studio/pages/frame.ts:6

  Component: component:protocol.projections · read-only output, layout and owned publication · src/projections/design-review.ts:29 · layer edge · context protocol

  Uses

  None.

Runtime observation: not tracked.

Runtime observation: not tracked.

Build attestations: not tracked.

Deployments: not tracked.

Bills of materials: not tracked.