feat(client): dense card-default views for containers and nodes#330
Merged
Conversation
Redesign the Containers and Nodes list pages to fix horizontal scrolling and improve mobile usability. - Default to a compact card (div-per-row) layout instead of a wide table; each card is a single dense row with inline metadata. - Add a persisted Cards/Table view toggle (localStorage) so the table remains available on demand. - Shorten container template to its image name+tag (full ref on hover). - Make header and row action buttons icon-only on mobile (with aria-labels), restoring text labels at the sm breakpoint. - Keep SSH host:port from wrapping mid-address. Verified no horizontal scroll and no overflow at 360px width.
runleveldev
approved these changes
Jun 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Old wrap was broken:
New look:
The Containers (
/sites/:id/containers) and Nodes (/sites/:id/nodes) list pages used wide tables that forced horizontal scrolling and did not fit on mobile. A table is not the best way to organize this data.What changed
div/Cardper row) instead of a wide table. Each card is a single dense row showing the key fields with inline labels — no horizontal scroll.localStorage(containers:view,nodes:view).templateis shortened to just its image name+tag (e.g.base:latest), with the full ref available on hover. Edit/Delete share the same line as the metadata instead of taking a full row.smbreakpoint witharia-labels, and restore text labels atsmand up.whitespace-nowrap).Testing
vite buildpasses; no TypeScript errors.lg.Notes
DataVisNitroGridfrom@mieweb/ui/datavis) for the table view. That grid requires the heavyweightdatavisengine (andag-grid-react), which are not installed in this project, so the table view continues to use the existing@mieweb/uiTable. Wiring up the NITRO grid can be a follow-up if we decide to add those dependencies.