Below 1280px the right-panel (chat + change-card panel) collapses into
an off-canvas drawer toggled from a Chat button in the editor toolbar.
Above 1280px the inline three-column layout is unchanged. Replaces the
Phase 2 narrow-viewport-banner stopgap.
- drawerOpen useState in RFCView; per-session, default closed; tied to
a .rfc-body.drawer-open class plus .right-panel.drawer-open and the
backdrop's data-open attribute.
- ChatDrawerToggleButton in each editor-toolbar branch (Contribute,
Discuss-with-accepted-changes, and a narrow-only fallback toolbar
for the default state). Badge mirrors change-panel-header: pending
AI changes + the buffered manual card. Hidden above 1280px via CSS.
- .right-panel becomes position: fixed; top: 48px; right: 0; width:
min(420px, 92vw); transform: translateX(100%) by default; slides in
with .drawer-open. Backdrop sibling with opacity transition handles
click-to-close.
- Escape closes the drawer when open (useEffect listener gated on
drawerOpen, so it's a no-op when closed).
- Toolbar gets padding-right shifted to drawer-width when the drawer
is open at narrow widths so the toggle stays clickable to close
(otherwise it'd sit under the open drawer).
- @media (min-width: 1280px) restores .right-panel to inline flex
(360px, position: static), hides the backdrop, hides the toggle
button, and hides the narrow-only toolbar fallback.
- Removes the .narrow-viewport-banner JSX + its CSS block + its
@media display:none rule.
SPEC.md §8.1 gains a paragraph noting the narrow-viewport drawer
collapse — explicit acknowledgment that the three-column shape adapts
below ~1280px without re-architecting around responsive primitives.
Verified in Vite preview sandbox at 1024px (drawer offscreen,
backdrop opacity 0, toggle visible) and 1440px (inline three-column,
drawer fixed-positioning reset, toggle hidden, backdrop display:none).
Backend was down this session (proxy 502 on /api/me) so the cumulative
Phase 2–5 end-to-end verification gap is still open; sandbox proof
only, as called out in the phase prompt.
Backend integration suite: 125 passed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ben Stull
49e91f8829