[iris] Make dashboard jobs view mobile-friendly#5170
Conversation
Switch the jobs list and job detail page to a card layout below the sm breakpoint, keeping the existing table for desktop. The card layout guarantees no page-level horizontal scroll on phones, makes the star button always visible (no hover dependency), and surfaces all relevant fields stacked per job. Also fix the surrounding shell so phone viewports don't push the page wide: - AppHeader: title truncates, buttons keep with shrink-0 - TabNav: tab strip scrolls inside its own container, not the page - PageShell: long job-id titles wrap via break-anywhere - LogViewer: filter bar wraps, filter input full-width on xs - App: overflow-x-clip safety net on the outer container
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f1dba035d8
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <div class="flex items-center gap-2 mb-6"> | ||
| <h2 class="text-xl font-semibold text-text font-mono">{{ title }}</h2> | ||
| <div class="flex items-center gap-2 mb-6 min-w-0"> | ||
| <h2 class="text-lg sm:text-xl font-semibold text-text font-mono break-anywhere min-w-0">{{ title }}</h2> |
There was a problem hiding this comment.
break-anywhere is not a Tailwind utility (Tailwind v4 uses wrap-anywhere/wrap-break-word), so this class compiles to no CSS and the long-title wrapping fix does not actually apply. On narrow viewports, long job IDs can still overflow or get clipped, which defeats the mobile-layout goal of this change and affects other new uses of break-anywhere in this commit as well.
Useful? React with 👍 / 👎.
|
Before this PR, on the mobile the dashboard is not very usable, after: 
Notes:
|
ha this answered all of my questions
i'm fine with it if you can handle the cognitive dissonance. |
rjpower
left a comment
rjpower
left a comment
There was a problem hiding this comment.
i suspect if we want mobile for everything, we'd want to have some shared e.g. table paradigm. (or maybe not? as long as the agents are happy editing it this way, I don't need to poke the bear)
The CSS `sm:hidden` / `hidden sm:block` approach kept both variants in the
DOM, which made the e2e smoke tests fail: Playwright's
`page.locator("text=smoke-simple").first` was matching the hidden mobile
card link, then `to_be_visible()` failed because that link is `display:
none` at desktop widths.
Render only one variant at a time, picked via a reactive viewport-width
ref. Adds a minimal `useMediaQuery` composable. CI runs at desktop width
and now sees only the desktop table.
3 participants
Summary
Make the iris controller dashboard jobs view usable on phones — eliminate page-level horizontal scrolling and adapt the layout to narrow viewports.
Pattern: a simple "switch" between mobile and desktop. Below the
smbreakpoint (640px) the jobs list and job detail render a stacked card grid (one job/task per card). Atsm+the existing tables render. Pagination is shared between both views.Cards solve three problems that the table couldn't on phones:
opacity-0 group-hover/row:opacity-100, which never lit up on touch devices)Surrounding shell fixes (also necessary for the page itself to not scroll):
AppHeader: title getstruncate min-w-0, buttons getshrink-0. Long titles like "Iris Controller Dashboard" no longer push the buttons off the right edge.TabNav: tab strip scrolls horizontally inside its own container (flex-1 min-w-0 overflow-x-auto). The page itself never scrolls horizontally — only the tab strip does, like an iOS tab bar. Refresh button stays pinned viashrink-0.PageShell: long job IDs in the page title (text-xl font-mono) had no break behavior; now usestext-lg sm:text-xl break-anywhere min-w-0so they wrap.LogViewer: filter bar (used inside the JobDetail logs section) wraps viaflex-wrap; filter input is full-width onxs, fixedw-64fromsm.App.vue:overflow-x-clipsafety net on the outer container — guards against any rogue overflow without breaking sticky/fixed children (the dashboard legend modal still works).Desktop is unchanged at
sm+: same tables, same column structure, same paddings, same column widths.Test plan
overflow-x-clipclips any overflow at the page level so the user never sees a horizontal page scrollbar, but content may be cut off on those tabs at narrow widths.)🤖 Generated with Claude Code