{"slug":"developers/14_RESPONSIVE_LAYOUT_AND_MOBILE_BEHAVIOR","title":"14 — Responsive Layout and Mobile Behavior","section":"developers","sectionLabel":"Developers","status":"current","type":"document","path":"developers/14_RESPONSIVE_LAYOUT_AND_MOBILE_BEHAVIOR.mdx","bytes":1308,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n**Status:** Active frontend handoff\n\nThe Workbench remains one surface at every viewport.\n\n## Desktop\n\n- persistent operational/platform navigation where permitted;\n- primary work canvas owns available width;\n- entity/context detail may use a temporary adjacent region;\n- Twin appears only as a bounded contextual card or explicit detail.\n\n## Tablet\n\n- navigation collapses to a rail or modal drawer;\n- tables preserve essential identity/status fields and move secondary fields\n  into record detail;\n- canvas supports pan/zoom and focused block editing;\n- approval actions remain visible with proposal/evidence context.\n\n## Mobile\n\n- navigation uses an accessible sheet or compact route selector;\n- tables become prioritized record lists;\n- detail, approval and contextual Twin content open as focused sheets;\n- no hover-only controls;\n- destructive/approval actions require a clear confirmation step.\n\n## Accessibility and continuity\n\n- WCAG 2.2 AA target, keyboard operation and visible focus;\n- touch targets at least 44×44 CSS pixels;\n- semantic headings, labels and live-region status;\n- reduced-motion support;\n- unsaved local drafts survive viewport changes;\n- tenant, entity, projection and active operation remain stable across layout\n  transitions.\n"}