ldraney/westside-app
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Fix Commerce page: jersey option not rendering + mobile header layout #229

New issue
Closed
opened 2026-04-06 23:47:13 +00:00 by forgejo_admin · 1 comment
forgejo_admin commented 2026-04-06 23:47:13 +00:00
Contributor
Copy link

Type

Feature

Lineage

Discovered during Commerce page validation (westside-landing#226). Two frontend rendering issues.

Repo

forgejo_admin/westside-landing

User Story

As Marcus (admin)
I want the Commerce page to show correct jersey options and render cleanly on mobile
So that I can see which jersey each player ordered and the page looks professional on my phone.

Context

Two issues found during production validation:

Bug 1 — Jersey option shows "--" instead of actual value:
The DB has jersey_option populated for all 16 paid players (verified via DB query). The API returns the field. But the Commerce page renders -- in the Option column. The Svelte component is likely not mapping the jersey_option enum value (reversible, jersey_warmup, opt_out) to display labels ("Reversible", "Jersey + Warmup", "Opt-Out"). Reference: the CRM page in admin/players/+page.svelte has a working getJerseyOptionLabel() function that correctly maps these values.

Bug 2 — Mobile header subtitle wraps into heading:
At 375px viewport, the subtitle "Jerseys, subscriptions, and contracts" wraps next to "COMMERCE" instead of stacking below it.

File Targets

Files the agent should modify:

  • src/routes/(app)/admin/commerce/+page.svelte — fix jersey option rendering (add label mapping function like getJerseyOptionLabel from the players page), fix page header markup for mobile wrapping
  • src/app.css — add mobile override for commerce page header if needed

Files the agent should reference (not modify):

  • src/routes/(app)/admin/players/+page.svelte — has working getJerseyOptionLabel() at ~line 99

Acceptance Criteria

  • Jersey Option column shows "Reversible", "Jersey + Warmup", or "Opt-Out" for paid players (not "--")
  • At 375px viewport, heading and subtitle stack cleanly
  • No layout changes on desktop
  • npm run build passes

Test Expectations

  • Manual: log in as Marcus, verify Option column shows actual labels
  • Manual: Playwright screenshot at 375px shows clean header
  • Run command: npm run build

Constraints

  • Match existing label mapping pattern from CRM page
  • No scoped Svelte styles
  • No new API changes needed — data is already correct in the response

Checklist

  • PR opened
  • Build passes
  • No unrelated changes

Related

  • forgejo_admin/westside-landing#226 — Commerce page (parent feature)
  • forgejo_admin/basketball-api#363 — closed as not needed (data is correct, bug is frontend)
  • project-westside-basketball — westside platform
### Type Feature ### Lineage Discovered during Commerce page validation (westside-landing#226). Two frontend rendering issues. ### Repo `forgejo_admin/westside-landing` ### User Story As Marcus (admin) I want the Commerce page to show correct jersey options and render cleanly on mobile So that I can see which jersey each player ordered and the page looks professional on my phone. ### Context Two issues found during production validation: **Bug 1 — Jersey option shows "--" instead of actual value:** The DB has `jersey_option` populated for all 16 paid players (verified via DB query). The API returns the field. But the Commerce page renders `--` in the Option column. The Svelte component is likely not mapping the `jersey_option` enum value (`reversible`, `jersey_warmup`, `opt_out`) to display labels ("Reversible", "Jersey + Warmup", "Opt-Out"). Reference: the CRM page in `admin/players/+page.svelte` has a working `getJerseyOptionLabel()` function that correctly maps these values. **Bug 2 — Mobile header subtitle wraps into heading:** At 375px viewport, the subtitle "Jerseys, subscriptions, and contracts" wraps next to "COMMERCE" instead of stacking below it. ### File Targets Files the agent should modify: - `src/routes/(app)/admin/commerce/+page.svelte` — fix jersey option rendering (add label mapping function like `getJerseyOptionLabel` from the players page), fix page header markup for mobile wrapping - `src/app.css` — add mobile override for commerce page header if needed Files the agent should reference (not modify): - `src/routes/(app)/admin/players/+page.svelte` — has working `getJerseyOptionLabel()` at ~line 99 ### Acceptance Criteria - [ ] Jersey Option column shows "Reversible", "Jersey + Warmup", or "Opt-Out" for paid players (not "--") - [ ] At 375px viewport, heading and subtitle stack cleanly - [ ] No layout changes on desktop - [ ] `npm run build` passes ### Test Expectations - [ ] Manual: log in as Marcus, verify Option column shows actual labels - [ ] Manual: Playwright screenshot at 375px shows clean header - Run command: `npm run build` ### Constraints - Match existing label mapping pattern from CRM page - No scoped Svelte styles - No new API changes needed — data is already correct in the response ### Checklist - [ ] PR opened - [ ] Build passes - [ ] No unrelated changes ### Related - `forgejo_admin/westside-landing#226` — Commerce page (parent feature) - `forgejo_admin/basketball-api#363` — closed as not needed (data is correct, bug is frontend) - `project-westside-basketball` — westside platform
forgejo_admin commented 2026-04-06 23:55:55 +00:00
Author
Contributor
Copy link

Scope Review: READY

Review note: review-868-2026-04-06
Scope is solid — template complete, file targets verified on remote, traceability intact, single-repo CSS fix well under 5-minute agent limit.

  • [SCOPE] arch-westside-app note missing in pal-e-docs (project-level doc gap, not a blocker)
  • Blast radius: .page-header CSS is shared across all admin pages — agent should verify Dashboard at 375px post-fix to catch regressions
## Scope Review: READY Review note: `review-868-2026-04-06` Scope is solid — template complete, file targets verified on remote, traceability intact, single-repo CSS fix well under 5-minute agent limit. - [SCOPE] arch-westside-app note missing in pal-e-docs (project-level doc gap, not a blocker) - Blast radius: `.page-header` CSS is shared across all admin pages — agent should verify Dashboard at 375px post-fix to catch regressions
forgejo_admin changed title from Fix Commerce page mobile layout: subtitle wraps awkwardly next to heading to Fix Commerce page: jersey option not rendering + mobile header layout 2026-04-06 23:56:11 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
251-docs-populate-ws-s26-prospect-user-story
252-docs-create-arch-landing-site-architectu
236-fix-jersey-image-urls
hotfix-jersey-image-urls
232-improve-public-roster-page-accuracy-and
180-fix-jersey-deadline
142-validate-coach-login-and-read-only-roste
139-fix-admin-dashboard-stats-showing-all-ze
129-validate-girls-draft-board-coach-login-a
204-auto-tag-update
deploy-update-image-tag
110-fix-harbor-push-target
No results found.
Labels
Clear labels   
domain:backend

   
domain:devops

   
domain:frontend
No labels
domain:backend
domain:devops
domain:frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/westside-app#229
No description provided.