# 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).