F 16 Mobile

Status: 🟢 ready to test (after #155, #174, #175) Owner: Adilet Last updated: 2026-05-08 Last verified on production: —

Goal

Every tester-facing path renders cleanly on a phone (sub-768px), and the admin triage queue works as a fullscreen overlay with the action bar always visible. No horizontal scroll; long URLs wrap; the action bar never drifts off-screen on mobile.

Actors

• Primary — Tester on phone (filing issues, browsing cycles, checking balance)
• Secondary — Admin on phone (triaging during a commute)

Preconditions

• Latest deploy includes #155 (mobile-friendly tester paths) + #174 (mobile triage list/detail toggle) + #175 (mobile triage v2 fullscreen overlay)
• Test on a real device (iPhone or Android) and Chrome DevTools at iPhone 14 Pro / Pixel 7 widths

Trigger

Open https://hackorda.kz on a phone, sign in, navigate to:

1. /app/test-cycles — cycle list
2. /app/test-cycles/:id — cycle detail
3. /app/test-cycles/:id/issues/new — file issue form
4. /app/test-cycles/balance — earnings dashboard
5. /app/admin/triage — admin triage queue (if admin)

Acceptance criteria

Layout (every tester path)

• AC-1 — Given a tester opens any /app/test-cycles/* page on a 390px viewport, when the page renders, then no horizontal scroll exists; long titles truncate with ellipsis or wrap; markdown body uses break-words so a single long URL doesn't overflow.
• AC-2 — Given the sidebar is hidden on mobile, when the user taps the hamburger, then the sidebar slides in (Sheet) and is fully usable. (Fixed in #162.)
• AC-3 — Given an attachment grid renders, on mobile it stacks to 1–2 columns instead of 3.

Triage on mobile

• AC-4 — Given the admin opens /app/admin/triage on mobile, when a card is selected, then the card opens as a fullscreen overlay (fixed inset-0 z-40) instead of a side panel.
• AC-5 — Given the fullscreen overlay is open, then the top strip shows Prev/Next icon buttons + the issue title; the body scrolls; the bottom action bar (Approve / Reject / Skip / etc.) is pinned and always visible regardless of body scroll position.
• AC-6 — Given the body scroll is locked behind the overlay, when the user dismisses (e.g. taps a "Back" icon in the strip), then the page scroll position is preserved.
• AC-7 — Given the IssueSection markdown contains a long URL, when it renders on mobile, then it wraps within the section width (no horizontal overflow).
• AC-8 — Given the user is on desktop (≥lg), then the triage layout reverts to its desktop list-detail split (no fullscreen overlay).

Issue detail on mobile

• AC-9 — Given an issue with multiple attachments, when the user opens it on phone, then the attachments grid is touch-friendly (rows or 1-col grid), tapping an image opens the lightbox at full viewport size.
• AC-10 — Given the issue has comments, when the user types in the comment composer, then the keyboard does not occlude the submit button (sticky composer or adequate padding).

Tester forms on mobile

• AC-11 — Given the file-issue form, when the tester drops a screenshot from photo library, then the upload works and the preview renders inline.
• AC-12 — Given the markdown editor on mobile, when the tester types, then the editor textarea is at least 200px tall and supports scroll within the page.

Test data / fixtures

• Baseline seed
• An issue with 3+ attachments, including a long-URL link in the description, on an active cycle.

Negative paths

Manual QA checklist (real device + DevTools both)

Tester paths

• iPhone 14 Pro / Pixel 7 viewport (390-412px)
• /app/test-cycles cycle list — readable, tap targets ≥40px
• /app/test-cycles/:id — tabs (Brief / Docs / Issues / My runs / Testers) visible
• Open issue detail — attachments stack 1-col; lightbox full-viewport
• File a new issue with photo from gallery — upload + inline preview
• Comment composer — keyboard doesn't hide Submit
• Balance dashboard — 5 columns wrap to 2× rows; numbers tabular

Admin triage

• /app/admin/triage on mobile — list view by default
• Tap a card → overlay opens fullscreen
• Top strip: Prev / Next icons + title visible
• Action bar pinned at bottom, always visible
• Scroll body — action bar stays put
• Long-URL test issue — wraps, no horizontal scroll
• Tap "Back" / Prev → next card; scroll preserved on list when dismissing
• Resize to ≥lg (1024px+) — layout reverts to desktop split

Automated test outline

test.describe("F-16 mobile", () => {
  test.use({ viewport: { width: 390, height: 844 }, isMobile: true });

  test("triage queue uses overlay on mobile", async ({ page }) => { … });
  test("action bar visible regardless of scroll", async ({ page }) => { … });
  test("long urls wrap (no horizontal scroll)", async ({ page }) => { … });
  test("issue detail attachments touch-friendly", async ({ page }) => { … });
  test("file issue form uploads from gallery", async ({ page }) => { /* fixture image */ });
});

Code references

• UI changes (most relevant):
  • src/components/test-cycles/admin/TriageQueue.tsx — fullscreen overlay (fixed inset-0 z-40 rounded-none lg:static lg:inset-auto lg:z-auto lg:rounded-xl), body scroll lock, top strip nav
  • src/components/test-cycles/IssueSection.tsx — min-w-0, pl-0 md:pl-8, markdown break-words
  • src/components/test-cycles/MediaLightbox.tsx — full-viewport sizing
• Pages: src/app/app/admin/triage/page.tsx, every /app/test-cycles/* page (mobile-friendly per #155)
• Layout helpers: Tailwind dvh, lg: breakpoint conventions

Events emitted (proposed)

(No mobile-specific events — instrument via existing flows. Could capture viewport class as a property on every event.)

Open questions / known gaps

• PWA manifest — installable on phone (manifest.webmanifest) is not built (feature-matrix.md §5.2). Low effort, big UX win.
• Issue detail mobile audit — same overlay treatment as triage may benefit /app/test-cycles/:id/issues/:issueId (long forms get awkward on small screens). Verify; #173 added prev/next which helps.
• Photo capture — can the form take a fresh photo from camera (vs. gallery only)? Verify HTML <input type="file" capture> is used.
• Offline tolerance — none today. Once PWA lands, consider queueing drafts for later sync.