read.markets/docs/superpowers/specs/2026-05-28-mobile-responsiveness-design.md

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