Skip to content

feat(ui): make the overview mobile-friendly#28

Merged
qu0b merged 1 commit into
masterfrom
qu0b/mobile
May 26, 2026
Merged

feat(ui): make the overview mobile-friendly#28
qu0b merged 1 commit into
masterfrom
qu0b/mobile

Conversation

@qu0b
Copy link
Copy Markdown
Member

@qu0b qu0b commented May 26, 2026

Summary

The overview was built for desktop and broke down on phones. This makes it responsive end-to-end while keeping the desktop layout intact.

The three root problems:

  • Sidebar pushed content off-screen. It's a fixed w-64 panel and main got ml-64 at every breakpoint, leaving ~134px of usable width on a 390px phone.
  • Job-card names truncated even on desktop. The page nests a 2-column queue inside a 2/3 panel, so cards are only ~320px wide even at 1440px, and the name used truncate — hence needing a very wide window to read details.
  • Bulk-action bars overflowed off both screen edges on mobile.

Changes

Navigation

  • Sidebar is now an overlay drawer below lg (slides in over content with a dimmed backdrop, auto-closes on nav); the main offset is lg:-only so mobile uses full width. Desktop keeps the pinned, collapsible sidebar. New transient mobileNavOpen UI state (not persisted).
  • Header has separate mobile (drawer) / desktop (collapse) hamburgers and trims the wordmark / status label / username on narrow screens.

Job cards (JobCard)

  • Now a @container: the name wraps instead of truncating, the badge row wraps, the meta row stacks when narrow, and the action icons collapse into a labelled overflow menu on narrow cards (inline icons on wide ones). Fixes both mobile and the narrow-desktop-queue truncation.

Group page

  • Header title/actions stack on mobile; bulk-action bars are contained + wrap on mobile, centered-floating on desktop.
  • Template cards are container-driven (full-width wrapping name + action row below on mobile, side-by-side on desktop); fixes a horizontal-overflow bug from a bare grid track + long <pre> config.

Other

  • JobDetailDialog field grids stack on small screens; long titles wrap.
  • Runners table scrolls horizontally on mobile (it was clipping the Labels and Last Seen columns via overflow-hidden); header counts wrap.

Testing

Driven in a real browser at 390 / 768 / 1024 / 1440 px across Dashboard, Queue, History (linear + grouped), Templates, Runners, the job-detail dialog, the nav drawer, and the bulk-action bar. No horizontal overflow on any page (scrollWidth == clientWidth). The @container cards verified to switch between the overflow menu (narrow) and inline icons (wide). tsc, eslint, and vite build all clean.

Note

This branch also carries the pre-existing benchmarkoor run-link work that was already in the working tree (config.ts / config.json and the run links in JobCard/JobDetailDialog) — it's intertwined with the card refactor and config.ts is needed to compile. Happy to split it out if preferred.

Known nit (not addressed here): at the lg edge (~1024–1180px) with the sidebar expanded, Pending cards get dense because the 3-col page grid and 2-col queue both switch on at lg. Functional (no clipping/overflow); can move the queue split to xl: if we want it roomier in that band.

The desktop layout was unusable on phones: the 256px sidebar stayed
pinned and pushed `main` off-screen at every breakpoint, job-card names
were truncated even on wide desktops (a nested 2-column queue keeps cards
~320px), and the floating bulk-action bars ran off both screen edges.

Navigation
- Sidebar is now an overlay drawer below `lg` (slides in over content
  with a dimmed backdrop, auto-closes on navigation); the `main` offset
  is `lg:`-only so mobile uses full width. Desktop keeps the pinned,
  collapsible sidebar. Adds a transient `mobileNavOpen` UI state.
- Header has separate mobile (drawer) / desktop (collapse) toggles and
  trims the wordmark/status-label/username to fit narrow screens.

Job cards
- JobCard is now a container (`@container`): the name wraps instead of
  truncating, the badge row wraps, the meta row stacks when narrow, and
  the action icons collapse into a labelled overflow menu on narrow cards
  (inline icons on wide ones). Fixes mobile and the narrow-desktop-queue
  truncation in one place.

Group page
- Header title/actions stack on mobile; bulk-action bars are contained
  and wrap on mobile, centered-floating on desktop.
- Template cards are container-driven (full-width wrapping name + action
  row below on mobile, side-by-side on desktop) and a horizontal-overflow
  bug from a bare grid track + long <pre> is fixed.

Other pages
- JobDetailDialog field grids stack on small screens; long titles wrap.
- Runners table scrolls horizontally on mobile (was clipping the Labels
  and Last Seen columns); header counts wrap.

Verified at 390 / 768 / 1024 / 1440 px across all tabs with no horizontal
overflow.

Also carries the pre-existing benchmarkoor run-link work that was already
in the working tree (config.ts / config.json and the card links).
@qu0b qu0b requested a review from skylenet as a code owner May 26, 2026 09:12
@qu0b qu0b merged commit 9dc0f92 into master May 26, 2026
3 checks passed
@qu0b qu0b deleted the qu0b/mobile branch May 26, 2026 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant