Skip to content

fix(gpu-monitor): keep multi-device layouts readable on phones - #4947

Closed
0xacee wants to merge 1 commit into
Osmantic:public-betafrom
0xacee:fix/gpu-monitor-fit-multi-device-mobile-layout
Closed

0xacee wants to merge 1 commit into
Osmantic:public-betafrom
0xacee:fix/gpu-monitor-fit-multi-device-mobile-layout

Conversation

@0xacee

@0xacee 0xacee commented Sep 14, 2026 •

Copy link
Copy Markdown
Contributor

Why this matters

An eight-GPU host makes GPU Monitor 585 px wide in a 320 px viewport. Assignment badges escape the page and the two-column mobile card layout squeezes telemetry. Operators checking a host from a phone cannot read all assigned devices.

Use one card column on small screens, wrap assignment badges within their panel, and allow the topology panel to shrink around its scrollable matrix. The matrix is keyboard focusable with an accessible name. Desktop columns and all reported device data remain intact.

Overlap check

Searched live open/closed PR titles and changed files for GPUMonitor, AssignmentTable, TopologyView, GPUCard, assignment, and layout. #2318 changes assignment labels/styles; #3712 adds topology link focus; #2029 changes legend colors; #2306 guards null card fields; #3711 exports history. None addresses multi-device layout overflow. #3712 shares the GPU-chip markup and will need to retain the wrapping classes when combined; there is no functional dependency.

Validation

  • Added scripts/check-gpu-layout.mjs, a real-browser regression rendering the production GPU Monitor page and stylesheet with eight-device API fixtures. It checks overview/history at 320, 390, 768, and 1280 px, device-label bounds, page overflow, and keyboard scrolling of overflowing topology matrices.
  • Chromium 153.0.8010.12: base fails (320 → 585 px; 390 → 585 px). Fixed page fits all eight viewport/tab combinations; both narrow matrices scroll with ArrowRight; no browser errors.
  • npm test -- --maxWorkers=2 src/components/GPUCard.test.jsx src/hooks/__tests__/useGPUDetailed.recovery.test.js: 6 passed.
  • npm run lint: 0 errors, 597 existing warnings. npm run build and git diff --check: passed.
  • Browser reproduction: from the dashboard directory, npm install --no-save --package-lock=false playwright@1.63.0, npx playwright install chromium, then node scripts/check-gpu-layout.mjs. This optional browser check is not claimed as an existing CI job.

Risk and review

Medium, dashboard presentation only. No GPU probing, assignment, runtime configuration, or hardware activation changes. Validation uses API fixtures in Chromium on Linux; native Safari and physical multi-GPU hardware were not exercised. Reverting restores the prior layout without a migration. Independent human review remains pending.

AI assisted diagnosis, implementation, tests, and this description.

Current validation

At the 2026-09-14 audit, head 8afa90607d90ccb0e2f5057d2856e9191d3fdaa1 has 32 successful and 4 skipped hosted checks, with no failed or pending checks. Independent human review and the declared deployed/platform checks remain merge gates.

Local synthetic integration head e8f982f09ba4c714ee2a65cb6867ea3e4328bfde combines the 30 September 14 candidates. Its complete frontend suite passes 144 files / 1,125 tests, and its production build passes.

@Lightheartdevs

Copy link
Copy Markdown
Collaborator

Thanks for this contribution. public-beta was promoted into main on 2026-09-24 and no longer receives changes, so we're closing pull requests that target it. This isn't a judgment on the change itself. If it's still needed, please rebase onto main and open a focused PR. See #7253 for details and the contribution policy.

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.

2 participants