fix: map jersey option API values and stack page-header on mobile #230

Merged

forgejo_admin merged 1 commit from 229-fix-commerce-jersey-option-mobile-header into main

2026-04-07 00:06:09 +00:00

forgejo_admin commented

2026-04-07 00:00:17 +00:00

Contributor

Summary

Fixes two bugs on the Commerce admin page: jersey option column rendering "--" for all players, and the page header wrapping awkwardly on mobile viewports.

Changes

src/routes/(app)/admin/commerce/+page.svelte — Updated jerseyOptionLabel() switch cases from stale keys (full, jersey_only) to actual API values (reversible, jersey_warmup, opt_out) so the Option column renders correct labels
src/app.css — Changed .page-header base styles from horizontal flex to vertical column stack, with horizontal layout restored at 640px+ via existing media query. This is a shared class so all 6 admin pages benefit.

Test Plan

Verify Commerce page Jersey tab shows "Reversible", "Jersey + Warmup", or "Opt-Out" instead of "--" for players with jersey orders
Verify page header stacks vertically at 375px on Commerce and Dashboard pages
Verify page header remains horizontal at 768px+ (no desktop regression)

Review Checklist

npm run build passes with no errors
No scoped <style> blocks — all CSS in global src/app.css
Desktop layout unchanged (horizontal header restored at 640px+)
Mobile-first pattern maintained (base = stacked, breakpoint = horizontal)

Closes #229

## Summary Fixes two bugs on the Commerce admin page: jersey option column rendering "--" for all players, and the page header wrapping awkwardly on mobile viewports. ## Changes - `src/routes/(app)/admin/commerce/+page.svelte` — Updated `jerseyOptionLabel()` switch cases from stale keys (`full`, `jersey_only`) to actual API values (`reversible`, `jersey_warmup`, `opt_out`) so the Option column renders correct labels - `src/app.css` — Changed `.page-header` base styles from horizontal flex to vertical column stack, with horizontal layout restored at 640px+ via existing media query. This is a shared class so all 6 admin pages benefit. ## Test Plan - Verify Commerce page Jersey tab shows "Reversible", "Jersey + Warmup", or "Opt-Out" instead of "--" for players with jersey orders - Verify page header stacks vertically at 375px on Commerce and Dashboard pages - Verify page header remains horizontal at 768px+ (no desktop regression) ## Review Checklist - [x] `npm run build` passes with no errors - [x] No scoped `<style>` blocks — all CSS in global `src/app.css` - [x] Desktop layout unchanged (horizontal header restored at 640px+) - [x] Mobile-first pattern maintained (base = stacked, breakpoint = horizontal) ## Related Notes - Closes #229

forgejo_admin added 1 commit

2026-04-07 00:00:17 +00:00

fix: map jersey_option API values and stack page-header on mobile

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

d8ef45ad0f

The Commerce page jerseyOptionLabel() mapped stale keys (full, jersey_only)
instead of the actual API values (reversible, jersey_warmup, opt_out),
causing "--" to render in the Option column for all paid players.

The shared .page-header used horizontal flex at all widths, causing the
subtitle to wrap awkwardly at 375px. Now stacks vertically by default and
restores horizontal layout at 640px+. Affects all 6 admin pages.

Closes #229

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-04-07 00:00:40 +00:00

Author

Contributor

QA Review -- APPROVED

Scope: 2 files, +10/-4 lines. Minimal and focused.

Bug 1 -- Jersey Option Column

jerseyOptionLabel() switch keys updated from full/jersey_only to reversible/jersey_warmup to match API response values
opt_out case unchanged (already correct)
Default '--' fallback preserved for unknown values

Bug 2 -- Mobile Header Layout

Base .page-header changed from horizontal flex (align-items: center; justify-content: space-between) to vertical stack (flex-direction: column; gap: 0.25rem)
Desktop restore added inside existing @media (min-width: 640px) block, restoring flex-direction: row, align-items: center, justify-content: space-between
Shared class -- all 6 admin pages benefit from the fix
No scoped <style> blocks added (constraint respected)

Build

npm run build passes cleanly

No issues found. Ready to merge.

## QA Review -- APPROVED **Scope:** 2 files, +10/-4 lines. Minimal and focused. ### Bug 1 -- Jersey Option Column - `jerseyOptionLabel()` switch keys updated from `full`/`jersey_only` to `reversible`/`jersey_warmup` to match API response values - `opt_out` case unchanged (already correct) - Default `'--'` fallback preserved for unknown values ### Bug 2 -- Mobile Header Layout - Base `.page-header` changed from horizontal flex (`align-items: center; justify-content: space-between`) to vertical stack (`flex-direction: column; gap: 0.25rem`) - Desktop restore added inside existing `@media (min-width: 640px)` block, restoring `flex-direction: row`, `align-items: center`, `justify-content: space-between` - Shared class -- all 6 admin pages benefit from the fix - No scoped `<style>` blocks added (constraint respected) ### Build - `npm run build` passes cleanly No issues found. Ready to merge.

forgejo_admin commented

2026-04-07 00:01:58 +00:00

Author

Contributor

PR #230 Review

DOMAIN REVIEW

Stack: SvelteKit frontend (westside-app), global CSS in src/app.css, Svelte components.

CSS (mobile-first pattern):

Base .page-header correctly changed to flex-direction: column with gap: 0.25rem -- proper mobile-first stacking.
Horizontal layout restored at the @media (min-width: 640px) breakpoint with flex-direction: row, align-items: center, justify-content: space-between, and gap: 0 -- clean override, no leftover properties.
Shared class means all 6 admin pages benefit without per-page duplication. Good.

JS (jersey option mapping):

Old switch cases (full, jersey_only) did not match API enum values, causing all rows to hit the default: return '--' branch.
New cases (reversible, jersey_warmup, opt_out) verified against the basketball-api migration 012_add_jersey_fields_to_player.py which defines sa.Enum("reversible", "jersey_warmup", "opt_out", name="jerseyoption"). Values match exactly.
The opt_out case was already correct and is preserved.

Accessibility: No new interactive elements introduced. No regressions.

Performance: No new dependencies, no bundle impact. Two CSS properties changed, four added behind a media query.

BLOCKERS

None.

No new functionality requiring test coverage -- this is a bugfix to existing switch cases and CSS layout. The repo has zero test infrastructure (node_modules/ vendor test excluded), so this is consistent with repo baseline.
No user input handling changes.
No secrets or credentials.
No auth path changes.

NITS

None. The diff is minimal and precisely scoped to the two bugs described.

SOP COMPLIANCE

Branch named after issue: 229-fix-commerce-jersey-option-mobile-header follows {issue-number}-{kebab-case-purpose} convention
PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related Notes all present
Related references parent issue: "Closes #229"
No plan slug expected (standalone bugfix, not plan work)
No secrets committed
No scope creep -- exactly two files changed, both directly related to the two bugs in #229
Commit message is descriptive

PROCESS OBSERVATIONS

Small, tightly scoped bugfix PR. Two discrete fixes (data mapping + CSS layout) that are both on the same page and share a root cause (Commerce page shipped with stale values + missing mobile treatment). Appropriate to bundle.
Deployment frequency: fast-track merge candidate. Change failure risk: low -- CSS is additive behind a breakpoint, JS fix aligns to verified API enum.
The repo has no test infrastructure. This is a known baseline, not a gap introduced by this PR.

VERDICT: APPROVED

## PR #230 Review ### DOMAIN REVIEW **Stack**: SvelteKit frontend (westside-app), global CSS in `src/app.css`, Svelte components. **CSS (mobile-first pattern)**: - Base `.page-header` correctly changed to `flex-direction: column` with `gap: 0.25rem` -- proper mobile-first stacking. - Horizontal layout restored at the `@media (min-width: 640px)` breakpoint with `flex-direction: row`, `align-items: center`, `justify-content: space-between`, and `gap: 0` -- clean override, no leftover properties. - Shared class means all 6 admin pages benefit without per-page duplication. Good. **JS (jersey option mapping)**: - Old switch cases (`full`, `jersey_only`) did not match API enum values, causing all rows to hit the `default: return '--'` branch. - New cases (`reversible`, `jersey_warmup`, `opt_out`) verified against the `basketball-api` migration `012_add_jersey_fields_to_player.py` which defines `sa.Enum("reversible", "jersey_warmup", "opt_out", name="jerseyoption")`. Values match exactly. - The `opt_out` case was already correct and is preserved. **Accessibility**: No new interactive elements introduced. No regressions. **Performance**: No new dependencies, no bundle impact. Two CSS properties changed, four added behind a media query. ### BLOCKERS None. - No new functionality requiring test coverage -- this is a bugfix to existing switch cases and CSS layout. The repo has zero test infrastructure (`node_modules/` vendor test excluded), so this is consistent with repo baseline. - No user input handling changes. - No secrets or credentials. - No auth path changes. ### NITS None. The diff is minimal and precisely scoped to the two bugs described. ### SOP COMPLIANCE - [x] Branch named after issue: `229-fix-commerce-jersey-option-mobile-header` follows `{issue-number}-{kebab-case-purpose}` convention - [x] PR body follows template: Summary, Changes, Test Plan, Review Checklist, Related Notes all present - [x] Related references parent issue: "Closes #229" - [x] No plan slug expected (standalone bugfix, not plan work) - [x] No secrets committed - [x] No scope creep -- exactly two files changed, both directly related to the two bugs in #229 - [x] Commit message is descriptive ### PROCESS OBSERVATIONS - Small, tightly scoped bugfix PR. Two discrete fixes (data mapping + CSS layout) that are both on the same page and share a root cause (Commerce page shipped with stale values + missing mobile treatment). Appropriate to bundle. - Deployment frequency: fast-track merge candidate. Change failure risk: low -- CSS is additive behind a breakpoint, JS fix aligns to verified API enum. - The repo has no test infrastructure. This is a known baseline, not a gap introduced by this PR. ### VERDICT: APPROVED