Context
QA on the dev server (branch ux/15-eventos, commit dc2a833) at <1024px viewport width: there's no way to close the Eventos investigation drawer. The Escape key handler (app.js:1967-1990) is wired up but mobile devices don't have physical keyboards. Tab-switch closes the drawer (issue #15 round 2 BL1 fix) but that's a heavy workaround for what's a one-tap affordance.
The drawer shell (<aside id="eventos-drawer">, index.html:124) renders no header at all — just whatever openEventDrawer writes into innerHTML. No close button, no swipe-down handle.
Repro
- Open http://127.0.0.1:8081, log in
- Resize to 800×600 (mobile)
- Click Eventos tab, then + Abrir evento on any review card
- Drawer slides up from bottom (CSS: position: fixed; bottom: 0; max-height: 50vh)
- No visible way to close it — pressing Escape does nothing on a touch device
- The only escape: tap another tab
Root cause
Two compounding gaps:
- No close button in the drawer UI.
openEventDrawer (app.js:1001) renders only the event data + save button, never a close affordance.
- Drawer has no header / chrome. Unlike the Cmd+K palette (app/static/components.css:474) which has a dedicated close affordance, the drawer is content-only.
Suggested fix
Add a small close button in the top-right of the drawer, visible only when the drawer is open:
- Render a
<button class="eventos-drawer-close" aria-label="Fechar">×</button> as the first child of the drawer when openEventDrawer runs.
- Call
closeEventDrawer() on click.
- Style it: absolute top-right of the drawer, 32×32 touch target, semi-transparent so it sits over any content.
- Same button should appear on desktop too (consistent affordance, keyboard users can Escape but mouse users currently can't).
Alternatively, a swipe-down handle at the top of the mobile drawer (touch-only) is a nice complement but the close button alone solves the bug.
Out of scope
PR #29 (the 5 review NITs) does not include this. Will be a separate lane.
Test gap
tests/test_eventos_vm.mjs (vm harness) doesn't render UI chrome, so a close-button test would need either browser-harness or a vm extension that exercises the drawer's innerHTML.
Context
QA on the dev server (branch ux/15-eventos, commit dc2a833) at <1024px viewport width: there's no way to close the Eventos investigation drawer. The Escape key handler (app.js:1967-1990) is wired up but mobile devices don't have physical keyboards. Tab-switch closes the drawer (issue #15 round 2 BL1 fix) but that's a heavy workaround for what's a one-tap affordance.
The drawer shell (
<aside id="eventos-drawer">, index.html:124) renders no header at all — just whateveropenEventDrawerwrites intoinnerHTML. No close button, no swipe-down handle.Repro
Root cause
Two compounding gaps:
openEventDrawer(app.js:1001) renders only the event data + save button, never a close affordance.Suggested fix
Add a small close button in the top-right of the drawer, visible only when the drawer is open:
<button class="eventos-drawer-close" aria-label="Fechar">×</button>as the first child of the drawer whenopenEventDrawerruns.closeEventDrawer()on click.Alternatively, a swipe-down handle at the top of the mobile drawer (touch-only) is a nice complement but the close button alone solves the bug.
Out of scope
PR #29 (the 5 review NITs) does not include this. Will be a separate lane.
Test gap
tests/test_eventos_vm.mjs(vm harness) doesn't render UI chrome, so a close-button test would need either browser-harness or a vm extension that exercises the drawer's innerHTML.