Skip to content

feat(harbor): rewrite the About tab and fix header clipping - #273

Merged
T-Crypt merged 3 commits into
nextfrom
T-Crypt/harbor-about-polish
Oct 31, 2026
Merged

T-Crypt merged 3 commits into
nextfrom
T-Crypt/harbor-about-polish

Conversation

@T-Crypt

@T-Crypt T-Crypt commented Oct 31, 2026 •

Copy link
Copy Markdown
Owner

The harbor's About tab still described the one-card harbor of v0.3. It was one narrow column of 1,640 words with no way to jump between sections. The header also clipped at common laptop widths, and on a phone an alert lost its message to an ellipsis. This PR rewrites About for v0.4 and fixes the layout faults I measured.

About tab

  • A lead card gives the tagline, the node and harbor versions read from the node, and links to the docs, the changelog, issues and the source.
  • New section on machines with several cards: one berth panel per scheduled card, card names on board rows and stowaways, and a VM marked on its own card.
  • Removed the "coming" list. The library has shipped, the gateway has its own /gui/ page, and the rest of the list no longer matched the roadmap. The last section says what the harbor does not do yet, gives the terminal commands, and links the roadmap.
  • The counters list gains JUGGLES STOPPED, which the counter panel shows but About never explained.
  • The text is 1,374 words, down from 1,640, with the new sections included. Each section is a card, and on a wide screen the cards flow down two columns. The tab has the same section rail as the card and engines tabs, and its keyboard list uses key caps.

Header and alerts

Measured with Playwright on the demo fixture, by counting header and alert elements whose text overflows their box:

Width Before After
390 px both alert messages cut off none
1024, 1280, 1440 px tagline cut off, ADVANCED clipped none
1920 px none none
  • The mode switch and the tab labels no longer shrink.
  • Below 1600 px the tagline and the "& REQUESTS" half of the engines tab are hidden, because they only fit cut off. The About tab leads with the tagline.
  • On a phone an alert's message wraps, and its time moves to a second line.

Fix: section links on reload

The section rails write the hash (#sec-library). On a reload, wireTabs treated an unknown hash as the card tab, so a shared link to any engines-tab section opened the wrong tab. It now opens the tab that holds the section and scrolls to it after the first status renders, because the alerts and panels that status adds move the section down. Tab hashes and #ticket= links work as before.

Proof

  • A Playwright script runs 28 checks at 1440 px and 390 px. They cover loading #sec-library, a linked section landing below the sticky header, #about-kpis, #engines, #about, an unknown hash and #ticket=, key 3, a rail jump and the reload after it, the version line, the rail's 13 links, and no page errors. All 28 pass. Against next, the #sec-library check fails.
  • go build, gofmt, go vet, the Windows build and vet, golangci-lint (0 issues) and go test ./... all pass.
  • CHANGELOG [Unreleased] and docs/harbor.md are updated.

The page is still read only. No API or Go code changes.

The About tab now leads with the node's version and links to the docs,
changelog, issues and source, covers machines with several cards, and
drops planned features that shipped or changed. Its sections are cards
in two columns on a wide screen, with the same section rail as the
other tabs.

The header no longer clips the ADVANCED switch or cuts its tagline off,
and a phone alert wraps instead of ending in an ellipsis.

A section link such as #sec-library opened the card tab on a reload.
It now opens the tab that holds the section.
The scroll ran before the first status rendered its alerts and panels,
so a linked section landed under the header or far below it.
@T-Crypt
T-Crypt merged commit 350a6d3 into next Oct 31, 2026
4 checks passed
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