pal-e-docs

Review: Fix Commerce page mobile layout: subtitle wraps awkwardly next to heading

review-868-2026-04-06 Doc

review ready
Project

Verdict: READY

Template Completeness

  • [x] Type — Feature
  • [x] Lineage — Discovered during Commerce page validation (westside-landing#226)
  • [x] Repo — forgejo_admin/westside-landing
  • [x] User Story — As Marcus (admin on mobile), clean Commerce header on phone
  • [x] Context — Describes the wrapping issue at 375px viewport with enough detail for a fresh-context agent
  • [x] File Targets — 2 files listed with specific paths and rationale
  • [x] Acceptance Criteria — 2 testable items
  • [x] Test Expectations — Manual Playwright screenshot + npm run build
  • [x] Constraints — Match existing page-header pattern, no scoped Svelte styles
  • [x] Checklist — Standard 3-item checklist
  • [x] Related — project-westside-basketball

Traceability

  • [x] story:WS-S9 — "As an admin, I want to track payment status per player so that I know who owes what"
  • [x] story note verified — found in project-westside-basketball user-stories section (Admin stories list)
  • [x] arch:westside-app — westside-app is the project-level arch label for the westside-landing Forgejo repo
  • [ ] arch note MISSING — [SCOPE] Create architecture note arch-westside-app for the westside SvelteKit frontend
  • [x] Forgejo issue — westside-landing#229, open

File Targets

  • [x] src/routes/(app)/admin/commerce/+page.svelte — verified on remote (main branch). Contains <div class="page-header"><h1>Commerce</h1><div class="subtitle">Jerseys, subscriptions, and contracts</div></div>
  • [x] src/app.css — verified on remote. Contains .page-header with display: flex; align-items: center; justify-content: space-between — this is the root cause. The subtitle sits beside h1 in flex row layout instead of stacking below.
Targets are specific enough for an agent to act on without guessing. The CSS root cause is clearly identifiable.

Repo Placement

OK. The issue is filed on forgejo_admin/westside-landing, which is the correct repo (local checkout: ~/westside-app). Single-repo fix. No multi-repo scope.

Dependencies

  • [x] Board item #863 (Commerce admin page — Svelte implementation) — status: done. The commerce page exists and is deployed. No blockers.
No unresolved dependencies.

Acceptance Criteria

2 criteria, both verifiable by an agent:
  • "At 375px viewport, heading and subtitle stack cleanly" — verifiable via Playwright screenshot at 375px width. Specific and testable.
  • "No layout changes on desktop" — verifiable via Playwright screenshot at 1024px+ width. Specific and testable.
No ambiguous language. Both criteria are programmatically verifiable.

Blast Radius

The .page-header CSS class is shared across ALL admin pages: Dashboard, Teams, Players, Schedule, Users, and Commerce. A CSS fix in app.css will affect all of them. This is actually desirable — the flex row layout is the root cause for all pages with subtitles. The agent should verify at least one other admin page (e.g., Dashboard at 375px) renders correctly after the CSS change to confirm no regressions. Rollback is straightforward — single CSS rule change.

Decomposition Assessment

2 file targets, 1 repo, 2 acceptance criteria. Estimated agent time: well under 5 minutes. The fix is a single CSS adjustment (possibly flex-direction or wrapping h1+subtitle). No discrete independent subtasks. No decomposition needed.

Recommendation

  • [SCOPE] Create architecture note arch-westside-app for the westside SvelteKit frontend component. This is a project-level documentation gap, not a blocker for this ticket.
No other action needed. Ticket is READY for agent dispatch.