mirror of https://github.com/runbear-io/beardrive.git synced 2026-08-25 08:08:08 +02:00

Files

T

Snow LeeandClaude Fable 5 3161fc73c9 feat(webapp): [mobile] round 3 — repair the wrap regression, onboarding inputs, auth controls

Designer round 3 FAILED the bar (6/6/7/9/6, one high) — it caught a
regression my round-2 fix introduced: .ai-main { overflow-wrap:anywhere }
let flex min-content collapse invite/share URL rows to one character per
line at 360/390 (496px-tall rows). Streak reset. Fixes:

- H1: on mobile the admin row's name/URL takes the full row
  (flex-basis 100%; controls drop below) and break-word replaces
  anywhere, so URLs wrap readably at natural break points
- M1: onboarding inputs collapsed to 18px (.ob-row goes column on
  mobile, so flex:1 became flex-basis:0) — now flex:none, 44px
- L1: overflow-menu items 44px; L2: server auth pages get 44px
  inputs/buttons at <=900px; L4: .markdown gets width:100% so short
  docs stop shrink-to-content floating; L5: .hmeta centers so the
  size stays attached when the author line wraps

go build/vet/test green; 42 e2e specs green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P5cxPQdSGJnjXCYY9GeWXt

2026-07-13 21:23:04 -07:00

3.9 KiB

Raw Blame History

Spec: Mobile layout quality for the BearDrive web app

Authoritative spec for the mobile-polish goal loop. The bar is met by independent review: a beardrive-designer subagent audits the running app and returns scores; the implementing agent never scores its own work.

Harness

Seeded hub: BDRIVE_E2E_SERVE=1 go test -count=1 -timeout 8h -run TestE2EServe ./internal/webapp → http://localhost:8993 (state resets per start). Accounts (password e2e-pass-1 for all): e2e@example.com (admin — insights, admin bar, org Manage), member@example.com (member), solo@example.com (no org — onboarding empty state).

Viewports (all must pass)

Name	Size
phone-small	360×800
phone	390×844
phone-landscape	844×390
tablet	768×1024

Surfaces to audit (per viewport)

Login page (/auth/login) — server-rendered, still in scope.
Project home: connect guide (tabs, code blocks + copy buttons) and, as admin, the embedded Insights below (treemap/scatter/hot-path/matrix SVGs must not overflow or become unreadably small).
Folder listing (/<pid>/notes): rows, heat dots, Recent changes feed.
Markdown file view (/<pid>/index.md): content, breadcrumbs, meta line, topbar actions (Share/History/Upload/Download vs the ⋯ menu — targets must stay tappable, header must not wrap or overflow).
History (/<pid>/history): entry rows, expandable notes.
Dedicated Insights (/<pid>/insights).
Org admin panel (Manage) and hub settings (Admin) — lists, selects, buttons, toggles.
Off-canvas sidebar: hamburger open/close, backdrop, tree interaction, auto-close after selecting a file.
⌘K palette (on tablet; on phones verify the Search button opens it and it is usable).
Modals (new-project prompt, share dialog, confirms) and toasts.
Onboarding empty state (as solo@).

Scoring rubric (designer subagent returns 0–10 per category)

layout — nothing overflows the viewport; no horizontal page scroll; wide content (code blocks, tables, SVGs, URLs) scrolls in its own box.
readability — type sizes/line lengths sane; nothing truncated without recourse; contrast preserved.
tap-targets — interactive elements ≥ ~44px effective target; no overlapping/cramped controls.
navigation — sidebar, breadcrumbs, back/forward, deep links all usable one-handed; nothing reachable only by hover.
polish — spacing, alignment, safe-area behavior, orientation change.

Findings carry severity (high/medium/low), the viewport+surface, and a concrete CSS/markup fix suggestion.

Exit bar

Two CONSECUTIVE designer rounds with every category ≥ 8/10 and zero high-severity mobile findings across all viewports. Desktop (1360×900) spot-checked each round — no regressions introduced by mobile fixes.

Rules

Fix in internal/webapp/frontend (prefer src/style.css; markup only when CSS can't). Rebuild committed static (npm run build) after every change; npm run e2e (42 specs) must stay green each iteration.
No new runtime dependencies; no desktop redesign — mobile fixes only.
Never commit internal/webapp/manual_serve_test.go.
Branch feat/mobile-polish, commit per iteration (feat(webapp): [mobile] ...), PR at the end; never merge or deploy.
Disputed/won't-fix findings: record below with reasoning, count them out of the exit bar only if justified here.

Scorecard (append one row per designer round)

Round	layout	readability	tap-targets	navigation	polish	high-sev findings
1 (before fixes)	5	7	6	8	7	1 (topbar overflow at 768/844 — breakpoint gap)
2 (after round-1 fixes)	9	8	8	9	8	0 (5 low cosmetics, fixed before round 3)
3 (after low-fixes)	6	6	7	9	6	1 (REGRESSION: URL rows collapsed by the wrap fix — streak reset, fixed for round 4)

Won't-fix / disputed

(none yet)

Status / blockers

(record and stop rather than deviate)

3.9 KiB Raw Blame History Unescape Escape