Mobile display of ticket overview needs improvement #76

New issue

Open

opened 2026-01-02 10:41:47 +00:00 by mprihoda · 1 comment

mprihoda commented

2026-01-02 10:41:47 +00:00

(Migrated from github.com)

The mobile display of the ticket overview looks the same as desktop, which doesn't work well on smaller screens. Need responsive design improvements for better mobile viewing experience.

claude commented

2026-10-16 09:34:26 +00:00

Member

Intake: needs-input

1. Which dashboard page is the "ticket overview" that is hard to use on a phone?

The dashboard has no page with the name "ticket overview". Four pages show issues: the root page /, the projects overview /projects, a project page /projects/<name>, and the worktree detail page /worktrees/<issue>. See the routes.

a) The worktree cards list (root page and project page). This is the list of issue cards. The change stays in the card layout.
b) The worktree detail page /worktrees/<issue>. This is the page for one issue, with its artifacts and status. The change stays in the detail view.
c) All dashboard pages. This is a full responsive pass. It is much larger and it touches every view.

Recommended: a) — the cards list is the page that most people open first, and "overview" matches it best.

2. What on that page is wrong on a phone today?

The issue says the mobile view "looks the same as desktop". That is now only partly true. Since commit 6c906de5, a rule below 768 px makes the worktree list and the project list one column wide (dashboard.css). Nothing else changes at that width.

@media (max-width: 768px) { .worktree-list { grid-template-columns: 1fr; } ... }

a) Content goes off the screen, with horizontal scroll. For example, long branch names, PR links or badges. The fix is to wrap or shorten them.
b) The header, chips or buttons are too small or too crowded to tap. The fix is to change the toolbar and the controls.
c) Something else. Tell us what, and the phone width or device (for example, 390 px, iPhone).

Recommended: a) — horizontal scroll is the most frequent problem when the only mobile rule is to make the grid one column wide.

Answer in a comment on this issue, per number, for example "1: a", or in your own words; intake reads it on its next iteration.

Intake: needs-input ### 1. Which dashboard page is the "ticket overview" that is hard to use on a phone? The dashboard has no page with the name "ticket overview". Four pages show issues: the root page `/`, the projects overview `/projects`, a project page `/projects/<name>`, and the worktree detail page `/worktrees/<issue>`. See the [routes](https://code.iterative.works/iterative-works/iw-cli/src/branch/main/dashboard/jvm/src/infrastructure/CaskServer.scala#L353-L519). - **a) The worktree cards list (root page and project page).** This is the list of issue cards. The change stays in the card layout. - **b) The worktree detail page `/worktrees/<issue>`.** This is the page for one issue, with its artifacts and status. The change stays in the detail view. - **c) All dashboard pages.** This is a full responsive pass. It is much larger and it touches every view. **Recommended: a)** — the cards list is the page that most people open first, and "overview" matches it best. ### 2. What on that page is wrong on a phone today? The issue says the mobile view "looks the same as desktop". That is now only partly true. Since commit 6c906de5, a rule below 768 px makes the worktree list and the project list one column wide ([dashboard.css](https://code.iterative.works/iterative-works/iw-cli/src/branch/main/dashboard/jvm/resources/static/dashboard.css#L1272-L1281)). Nothing else changes at that width. > @media (max-width: 768px) { .worktree-list { grid-template-columns: 1fr; } ... } - **a) Content goes off the screen, with horizontal scroll.** For example, long branch names, PR links or badges. The fix is to wrap or shorten them. - **b) The header, chips or buttons are too small or too crowded to tap.** The fix is to change the toolbar and the controls. - **c) Something else.** Tell us what, and the phone width or device (for example, 390 px, iPhone). **Recommended: a)** — horizontal scroll is the most frequent problem when the only mobile rule is to make the grid one column wide. Answer in a comment on this issue, per number, for example "1: a", or in your own words; intake reads it on its next iteration.

claude added the

needs-input

label

2026-10-16 09:34:26 +00:00