Skip to content

Docs HTML — Mobile-Responsive Layout — Plan

Motivation

The three interactive diagram files (docs/arch.html, docs/agent.html, docs/agent-flow.html) are deployed to Cloudflare Pages but are desktop-only. On mobile the fixed 300px sidebar dominates the viewport, the SVG diagram overflows, and the toggle button is too small to tap. Making them mobile-friendly ensures the architecture and agent flow diagrams are readable from a phone.

Scope

In scope: - All three files: docs/arch.html, docs/agent.html, docs/agent-flow.html - Responsive sidebar (overlay on mobile instead of push) - SVG diagram pan/scroll on mobile - Touch-friendly toggle button in the header - Semi-transparent backdrop to close sidebar on mobile tap

Out of scope: - Any changes to SVG rendering or diagram logic - Redesigning the desktop layout - Adding zoom/pinch-to-zoom on the SVG - Changes to sidebar content

Approach

All three files follow the same layout pattern. Apply the same changes to each.

  1. Add #sidebar-backdrop div — insert immediately before </body>: ```html

```

  1. Add #mobile-sidebar-btn button to #header — insert inside #header, floated/positioned to the top-right: html <button id="mobile-sidebar-btn" aria-label="Toggle details panel">&#9776;</button>

  2. Add @media (max-width: 768px) CSS block covering:

  3. #layout { right: 0; } — canvas always full-width on mobile
  4. #sidebar — becomes overlay (z-index: 110), full or near-full width (min(300px, 90vw))
  5. #sidebar-backdrop — position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 105; display: none; (shown via .open class)
  6. #sidebar-toggle { display: none; } — hide the desktop toggle tab
  7. #mobile-sidebar-btn — display: flex; min-width: 44px; min-height: 44px; positioned top-right in header
  8. #legend { display: none; } — hide legend on mobile to prevent header overflow

  9. #diagram { max-width: 100%; height: auto; }

  10. Auto-collapse sidebar on mobile — in the existing JS init block, add: js if (window.innerWidth <= 768) { sidebar.classList.add('collapsed'); }

  11. Wire up mobile toggle + backdrop — add a small JS block: js const mobilBtn = document.getElementById('mobile-sidebar-btn'); const backdrop = document.getElementById('sidebar-backdrop'); function isMobile() { return window.innerWidth <= 768; } mobilBtn.addEventListener('click', () => { const collapsed = sidebar.classList.toggle('collapsed'); backdrop.style.display = (!collapsed && isMobile()) ? 'block' : 'none'; }); backdrop.addEventListener('click', () => { sidebar.classList.add('collapsed'); backdrop.style.display = 'none'; }); Ensure the existing desktop toggle JS also hides the backdrop when it fires on mobile.

  12. Read each file's existing toggle JS before editing — the three files wire the existing #sidebar-toggle slightly differently; make sure the new mobile JS doesn't double-fire or conflict.

Open Questions

  • Should the sidebar on mobile be full-width or capped at 90vw? (Suggested: min(300px, 90vw) — keeps it compact on larger phones.)

Status

done

  • [x] Update docs/arch.html
  • [x] Update docs/agent.html
  • [x] Update docs/agent-flow.html
  • [ ] Verify on Chrome DevTools mobile viewport (375px, 768px)