Skip to content

fix(web): size the content area and tables to what they actually hold - #170

Merged
jamofer merged 1 commit into
mainfrom
feat/web-content-width-and-table-sizing
Aug 4, 2026
Merged

fix(web): size the content area and tables to what they actually hold#170
jamofer merged 1 commit into
mainfrom
feat/web-content-width-and-table-sizing

Conversation

@jamofer

@jamofer jamofer commented Aug 4, 2026

Copy link
Copy Markdown
Collaborator

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, with truck42 alone 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-fit card, w-auto min-w-full table) 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.

Before After
Peers @1440 scrolled, 192px wasted 1153px, no scroll
Peers @1920 scrolled, 672px wasted no scroll
Pins 1534px, 3 sparse columns 781px, full fingerprint
ACLs 1534px 879px, full fingerprint
Users middle column 1156px wide 379px

Testing

Measured and screenshotted in a real browser at 1280/1440/1600/1920 against the live stack:

  • npm run lint and tsc -b clean
  • No horizontal scroll from 1440 up; at 1280 it still scrolls, which is the fallback doing its job
  • Two rejected alternatives were built and looked at first: full-width-always (sparse columns) and slack-in-the-first-column (data clumps against the buttons with a void after the name)

Notes

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.

@jamofer
jamofer merged commit d89ee83 into main Aug 4, 2026
6 checks passed
@jamofer
jamofer deleted the feat/web-content-width-and-table-sizing branch August 4, 2026 18:41
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