> For the complete documentation index, see [llms.txt](https://faction-os.gitbook.io/faction-os-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_21/session_06_responsive_layout_and_accessibility_pass.md). # Session 06: Responsive Layout And Accessibility Pass **Session ID**: `phase21-session06-responsive-layout-and-accessibility-pass` **Package**: apps/web **Status**: Complete **Completed**: 2026-06-29 **Estimated Tasks**: \~12-20 **Estimated Duration**: 2-4 hours *** ## Objective Verify the expanded bottom-rail surfaces are usable across desktop and small viewports. *** ## Scope ### In Scope (MVP) * Tune expanded surface sizing so it is not clipped by the cockpit grid at desktop or mobile widths. * Confirm the compact bottom rail remains usable when no panel is expanded. * Check ARIA names, focus movement, scroll locking, tab order, close controls, and keyboard access for all three surfaces. * Run a browser pass at a small viewport and a desktop viewport. * Fix layout defects found during visual verification, including text overflow, clipped controls, or incoherent overlap. ### Out of Scope * Full formal WCAG certification. * New mobile navigation systems. * Redesigning unrelated cockpit panels. *** ## Prerequisites * [ ] Sessions 02, 03, and 05 completed. * [ ] Local web app can run for browser verification. * [ ] Target small and desktop viewport sizes selected for evidence. *** ## Deliverables 1. Responsive focused-surface layout that works at small and desktop widths. 2. Accessibility refinements for labels, focus, Escape, close controls, and scroll behavior. 3. Browser evidence or documented local verification for all three surfaces. *** ## Folded Source Details The source investigation found that layout constraints make the full Orchestration workbench hard to use in the bottom rail: `apps/web/src/components/Layout.tsx:21` limits the large-screen bottom row to `minmax(340px,36vh)`, and `apps/web/src/components/Layout.tsx:22` fixes the 2xl bottom row to `340px`. That height has to contain the Orchestration header, state banner, filters, current-state summary, and Command Center tabs. Implementation details to preserve: * Expanded mode adds room and focus; it does not replace or shrink the compact implementation. * The focused surface must not be clipped by the cockpit grid. * Compact bottom rail remains usable when no surface is expanded. * Accessibility behavior must include ARIA names, focus movement, scroll locking or containment as appropriate, tab order, close controls, keyboard access, and Escape behavior. * Browser verification must cover at least one small viewport and one desktop viewport. * Visual fixes must address text overflow, clipped controls, and incoherent overlap. * Do not claim formal WCAG or mobile certification; this session produces practical accessibility and responsive evidence only. End-to-end delivery bar for this session: * The product outcome is that a user on a smaller screen or a user focusing one panel can actually operate the full panel interface. * Visible results must show all three expanded surfaces are framed, reachable, scrollable where needed, and free of control overlap at the tested viewports. * Recovery paths must prove keyboard and pointer users can close the surface and return to the cockpit. *** ## Success Criteria * [ ] Expanded Quest Board, Orchestration, and War Room are not clipped and remain scrollable where needed. * [ ] Focus starts in the expanded surface, returns to the opener on close, and does not escape behind the active surface during normal keyboard navigation. * [ ] Text and controls do not overlap at the tested small and desktop viewports. * [ ] Compact bottom rail remains usable when no panel is expanded. * [ ] Any formal certification language remains no-claim unless separately obtained. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://faction-os.gitbook.io/faction-os-docs/.spec_system/archive/phases/phase_21/session_06_responsive_layout_and_accessibility_pass.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.