diff --git a/.gitignore b/.gitignore index 0c0c5ae..168165b 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ build/ dist/ .coverage .mypy_cache/ +.superpowers/ diff --git a/docs/superpowers/specs/2026-05-28-mobile-responsiveness-design.md b/docs/superpowers/specs/2026-05-28-mobile-responsiveness-design.md new file mode 100644 index 0000000..769287b --- /dev/null +++ b/docs/superpowers/specs/2026-05-28-mobile-responsiveness-design.md @@ -0,0 +1,88 @@ +# Mobile responsiveness — design + +**Status:** approved 2026-05-28 (user opted to skip the implementation-plan +ceremony and iterate on the coded product instead). +**Scope:** all views, single ≤480px breakpoint, incremental media-query approach. + +## Decisions captured + +1. **Target device:** phones only. Single `@media (max-width: 480px)` breakpoint. + Tablets and small laptops keep the existing desktop layout. +2. **Scope:** every template (auth, public, app, dashboard, log, news, settings). +3. **Mobile topbar pattern:** hamburger drawer, **side-slide from the right**. +4. **Indicator table:** hide secondary columns on phones (`ccy`, `1y`, `anchor`, + `as_of`); keep symbol, price, 1d, 1m. +5. **CSS organisation:** per-file `@media` block at the bottom of each CSS file — + extends the pattern already in `layout.css`, `log-chat.css`, `news.css`, + `portfolio.css`, `public.css`. No central `mobile.css`. + +## Architecture + +``` +tokens.css — no mobile rules +layout.css — drawer geometry + topbar mobile layout +panels.css — header padding tightens +dashboard.css — group tabs scroll, indicator table column-hiding +portfolio.css — overall grid 2-col, composer textarea full-width, action wrap +log-chat.css — body padding, bubble width +auth.css — card padding +settings.css — form rows stack +news.css — pill wrap, source under headline +public.css — tighten existing 520/560 rules, hero typography clamp +``` + +Two small additions to `base.html`: +- A hamburger button in `.app-header` (hidden on desktop via `display: none`, + shown at ≤480px). +- ~20 lines of vanilla JS to toggle `body.drawer-open` plus a backdrop element. + Tap-backdrop, ESC, and swipe-right-on-drawer all close. + +## Hamburger drawer (right-side) + +- `position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 320px)` +- Transform animation: `translateX(100%) → translateX(0)`, `180ms ease-out` +- Backdrop: `rgba(0,0,0,0.4)`, fades in over `120ms` +- Existing nav + `.header-right` widgets get wrapped in `.mobile-drawer` which + is `display: contents` on desktop (zero layout effect) and the fixed slide-out + panel on mobile. +- The existing `.user-menu` dropdown chip hides on mobile; its links surface + flat inside the drawer. + +## Per-view rules + +**Dashboard.** Group-tabs `overflow-x: auto`, no-wrap. Indicator table hides +`Ccy / 1y / anchor / as_of` columns. Aggregate-read summary header tightens. + +**Portfolio.** `.pf-overall__grid` collapses to 2 columns. Composer textarea +becomes full-width. `.pf-actions` buttons wrap to two rows instead of squishing. + +**Log + chat.** Body padding `16px → 10px`. Chat bubbles `max-width: 100%`, +user bubble loses right margin so it reaches the screen edge. + +**News.** Tag pills flex-wrap. Source + timestamp move under headline. +Shift-click hint hides (touch users get long-press equivalent). + +**Settings.** Form rows stack — label above input. Two-column import picker +becomes single column. Digest preferences keep their layout. + +**Auth.** Card padding `28px 26px → 20px 18px`. Width already fluid. + +**Public pages.** Audit existing 520/560 breakpoints; tighten hero typography +with `clamp()` so it scales down for small phones. + +## Testing + +- No Python tests affected — this is pure CSS + a single template tweak. + Existing 336-pass suite stays green. +- Manual verification on the user's phone post-deploy. (User cannot reach + localhost on the dev host, so visual companion was abandoned mid-brainstorm + in favour of ASCII previews; same constraint means no local browser smoke + test from the assistant side either — user iterates on the deployed site.) + +## Out of scope + +- Tablet / small-laptop breakpoints. Single ≤480 only. +- Touch gestures beyond drawer swipe-right-to-close. +- Mobile-specific reordering of dashboard panels (existing collapse order + is preserved). +- Visual companion server work (host unreachable from user's browser).