Make user game lists more mobile friendly #825

New issue

Open

opened 2026-07-16 13:40:29 -05:00 by Codex · 0 comments

Codex commented

2026-07-16 13:40:29 -05:00

Member

Copy link

User game list pages need a more compact mobile layout. A user reported the issue from Android Chrome screenshots of public list pages such as /list/andrewstencel and /list/jimmyb: each entry renders as a tall block with repeated labels for rating, ownership type, priority, difficulty, hours, started, and finished. On long lists, especially a completed tab with hundreds of games, the page requires a lot of scrolling before users can scan titles or reach the load-more/footer controls.

The screenshots also show the status tab row cramped on mobile, with neighboring tabs partially visible/cut off. The core problem is that the mobile card view prioritizes every metadata field by default, even when most fields are empty or repetitive.

Scope

Public user game list pages such as /list/{username}.
The signed-in owner list route at /list.
Mobile status tabs and mobile list/card markup under the game-list page.
Existing desktop table layout, status filtering, load-more behavior, owner edit/delete actions, and dark mode.

Proposed Direction

Make mobile entries collapsed or summary-first by default so users can scan game title, platform, and the most useful status-specific details without seeing every field expanded.
Provide an accessible way to expand an entry and reveal the full metadata block when needed.
Consider hiding empty/default metadata from the collapsed summary, or grouping it behind a details disclosure.
Keep owner edit/delete actions reachable without making each card visually heavy.
Review the mobile status tab row so long labels/counts remain usable on narrow Android Chrome viewports.

Acceptance Criteria

Mobile list entries render in a compact default state that substantially reduces vertical space per game.
Users can reveal the full metadata for an individual entry without navigating away.
Empty or dash-only values do not dominate the collapsed mobile view.
Game title, platform, and owner edit/delete actions remain easy to find and tap.
Status tabs remain horizontally usable on narrow mobile screens and clearly show the active tab.
Desktop table behavior remains unchanged unless a shared markup change is required.
Load-more responses append mobile entries using the same compact/expandable behavior.
Dark mode remains readable and touch targets stay accessible.

Test Coverage Required

Extend GameListPageTest to assert the mobile card markup exposes compact entries and an accessible expand/reveal control.
Cover both public username routes and the signed-in owner route where owner actions appear.
Preserve coverage for status tabs, lazy partial responses, load-more mobile HTML, and owner-only edit/delete routes.
Add or update frontend asset coverage/build verification if JavaScript is needed for expand/collapse behavior.
Run focused game-list page tests before closing the issue.
Run npm run build if shared frontend assets change.
Run vendor/bin/pint --dirty --format agent if PHP/Blade files change.

Progress Checklist

Audit the current mobile list card and tab markup against the attached Android Chrome screenshots
Design the compact default mobile entry state
Add an accessible per-entry expand/reveal interaction for full metadata
Keep owner actions usable in the compact state
Improve narrow-screen status tab usability if needed
Preserve load-more behavior for compact mobile entries
Add focused game-list page regression coverage
Run focused GameListPageTest coverage
Run npm run build if frontend assets changed
Run vendor/bin/pint --dirty --format agent if PHP/Blade files changed
Move the issue out of Codex review once verification is complete

User game list pages need a more compact mobile layout. A user reported the issue from Android Chrome screenshots of public list pages such as `/list/andrewstencel` and `/list/jimmyb`: each entry renders as a tall block with repeated labels for rating, ownership type, priority, difficulty, hours, started, and finished. On long lists, especially a completed tab with hundreds of games, the page requires a lot of scrolling before users can scan titles or reach the load-more/footer controls. The screenshots also show the status tab row cramped on mobile, with neighboring tabs partially visible/cut off. The core problem is that the mobile card view prioritizes every metadata field by default, even when most fields are empty or repetitive. ## Scope - Public user game list pages such as `/list/{username}`. - The signed-in owner list route at `/list`. - Mobile status tabs and mobile list/card markup under the game-list page. - Existing desktop table layout, status filtering, load-more behavior, owner edit/delete actions, and dark mode. ## Proposed Direction - Make mobile entries collapsed or summary-first by default so users can scan game title, platform, and the most useful status-specific details without seeing every field expanded. - Provide an accessible way to expand an entry and reveal the full metadata block when needed. - Consider hiding empty/default metadata from the collapsed summary, or grouping it behind a details disclosure. - Keep owner edit/delete actions reachable without making each card visually heavy. - Review the mobile status tab row so long labels/counts remain usable on narrow Android Chrome viewports. ## Acceptance Criteria - Mobile list entries render in a compact default state that substantially reduces vertical space per game. - Users can reveal the full metadata for an individual entry without navigating away. - Empty or dash-only values do not dominate the collapsed mobile view. - Game title, platform, and owner edit/delete actions remain easy to find and tap. - Status tabs remain horizontally usable on narrow mobile screens and clearly show the active tab. - Desktop table behavior remains unchanged unless a shared markup change is required. - Load-more responses append mobile entries using the same compact/expandable behavior. - Dark mode remains readable and touch targets stay accessible. ## Test Coverage Required - Extend `GameListPageTest` to assert the mobile card markup exposes compact entries and an accessible expand/reveal control. - Cover both public username routes and the signed-in owner route where owner actions appear. - Preserve coverage for status tabs, lazy partial responses, load-more mobile HTML, and owner-only edit/delete routes. - Add or update frontend asset coverage/build verification if JavaScript is needed for expand/collapse behavior. - Run focused game-list page tests before closing the issue. - Run `npm run build` if shared frontend assets change. - Run `vendor/bin/pint --dirty --format agent` if PHP/Blade files change. ## Progress Checklist - [ ] Audit the current mobile list card and tab markup against the attached Android Chrome screenshots - [ ] Design the compact default mobile entry state - [ ] Add an accessible per-entry expand/reveal interaction for full metadata - [ ] Keep owner actions usable in the compact state - [ ] Improve narrow-screen status tab usability if needed - [ ] Preserve load-more behavior for compact mobile entries - [ ] Add focused game-list page regression coverage - [ ] Run focused `GameListPageTest` coverage - [ ] Run `npm run build` if frontend assets changed - [ ] Run `vendor/bin/pint --dirty --format agent` if PHP/Blade files changed - [ ] Move the issue out of Codex review once verification is complete

Codex added the

Rows
Columns