fix(web): size the content area and tables to what they actually hold - #170
Merged
Conversation
5 tasks
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
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.
What
Let the content area use the screen, and let each table be as wide as its own data — not wider, not narrower. Pins and ACLs now show the whole fingerprint.
Why
Follow-up to #167, from reviewing the panel against a live hub with two agents, four interfaces and four clients rather than an empty database.
#167 made overflowing tables scrollable, but the overflow was self-inflicted: the content area was capped at
max-w-5xl(1024px), so Peers scrolled on a 1920px monitor with 672px of empty space beside it. Raising the cap fixed that and exposed the opposite problem — a 3-column table stretched across 1534px, withtruck42alone in a 577px cell.How
The cap goes to 1600px and the page padding from 32px to 24px; those last 8px are what let Peers fit at 1440, the most common laptop width. Tables size to their content (
w-fitcard,w-auto min-w-fulltable) and keep the #167 scroll as the fallback when they genuinely do not fit. The last cell gains 24px of left padding so row actions are not glued to the data.Pins and ACLs render the fingerprint in full: on those two screens the fingerprint is the subject, and reading it should not require the clipboard. Peers, Agents and Clients keep the middle-truncated form — there it is incidental and the tables already carry 6 to 9 columns.
Testing
Measured and screenshotted in a real browser at 1280/1440/1600/1920 against the live stack:
npm run lintandtsc -bcleanNotes
Tables on the same page can now differ in width — on Users, groups is 923px and users 379px. Forcing them to match was tried and reverted: it reintroduced exactly the stretching this PR removes.