Step 12c: UI polish, fonts and design-skill pass #18
Loading…
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Step 12c, from owner feedback on the
devscreenshots (2026-09-22): the fonts did not look right, and every UI job must use Emil Kowalski's and Jakub Krehel's skills. The skills are now installed on the dev VM from https://github.com/emilkowalski/skills (85e8e23) and https://github.com/jakubkrehel/skills (267330e). The owner also suggested https://sveltebits.xyz/ components wherever they add finesse.Scope:
document.fonts.readybefore screenshots and assert that the faces loaded.better-typography).better-interfaceandemil-design-engreview of the existing pages, with its fixes.Done when merged to
devwith screenshots at 1440×900 and 390×844, light and dark.Started ui-polish on branch , base head . Scope is , , and ; no Rust crates, , or API changes. Loading the UI contracts and mandatory design/accessibility/typography/motion guidance before inspecting and editing.
Started ui-polish on branch ui-polish, base head
bfa8af7ffc. Scope is packages/ui, packages/web, and scripts/browser-check.mjs; no Rust crates, scripts/verify, or API changes. Loading the UI contracts and mandatory design, accessibility, typography, and motion guidance before inspecting and editing.Baseline evidence: the browser gate passed on
bfa8af7. Screenshots are under /mnt/hdd/infraternal/artifacts/ui-polish/before. At 390x844 the container filters occupy the first screen and the row action buttons compress the name and status. The runtime font probe after the production build reported Inter Variable status loaded and document.fonts.check true, while JetBrains Mono Variable was declared but remained unloaded and document.fonts.check false until an explicit fonts.load call; the browser check therefore needs to await document.fonts.ready and load/assert both faces before every screenshot. The current detail template renders Finished and Exit code unconditionally, and timestamps use locale strings without time datetime metadata. I am proceeding with the narrow layout, shared timestamp/image primitives, opsz font face, and typography/accessibility review.Implementation evidence: commits
a6fdf6aand161072badd the shared Timestamp primitive, ImageReference digest copy affordance, Inter opsz plus JetBrains wght loading, tabular sans-serif dashboard counts, keyboard auth tabs, collapsed mobile filters, compact action menus, and strict font-aware responsive screenshots. The production browser gate passed with the compact layout, reduced-motion media, digest copy check, and no overflow or overlap failures. After screenshots are under /mnt/hdd/infraternal/artifacts/ui-polish/after; runtime detail screenshots confirm a running container shows Started but no Finished or Exit code.Finished ui-polish at head
36abab422b. No Rust crates, API contracts, or scripts/verify files changed.Implemented:
Rules applied:
Budget:
bfa8af7initial-route JS gzip: 73048 bytes.Gates quoted verbatim:
PASS fast: JavaScript dependencies
PASS fast: build web app
PASS fast: cargo fmt --check
PASS fast: cargo clippy
PASS fast: cargo test
PASS fast: svelte-check
PASS fast: UI package svelte-check
PASS fast: Vitest
PASS fast: UI package Vitest
PASS fast: OpenAPI and TypeScript client drift
PASS browser: JavaScript dependencies
PASS browser: install Chromium and system dependencies
PASS browser: build web app
PASS browser: build release binary
PASS browser: Playwright against release server
Screenshots:
Safari owner checklist:
Starting independent review on branch ui-polish at
36abab4(base dev65ba959). I will inspect the full diff, verify the reported clipping and typography/accessibility claims, fix merge-blocking defects on this branch, and run the required fast and browser gates.Review/fix complete on
ui-polish.Findings and fixes:
Containers PageIntro status cluster was intrinsically zero-width because Cluster's inline-size containment collapsed the max-content grid track; its badge and poll status overflowed the main content box at desktop. Applied the better-layout/shared-grid rule and better-interface no-clipping rule in
packages/ui/src/lib/PageIntro.svelte; the action cluster now sizes to its contents and remains full-width on compact layouts.Compact virtualized table rows could exceed the initial 52px virtualizer boundary; the 40px Actions target was clipped at the phone card edge. Applied the better-layout space-aware/scroll-boundary rule and better-ui minimum hit-area rule in
packages/ui/src/lib/Table.svelte: compact tables estimate 64px rows, enforce a 64px compact row minimum, and show an inset bottom boundary cue. The browser check now rejects clipped controls, unreachable rendered rows, missing boundary cues, and missing Actions columns.The new content-box invariant exposed a separate pre-existing Hosts table overflow at 1024px and 390/320px. Applied the better-layout responsive-column and better-typography deliberate-truncation rules in
packages/web/src/routes/hosts/+page.svelte: compact widths/priorities fit the table and host IDs ellipsize.Review verdict:
document.fonts.statuswasloaded;document.fonts.check('14px "Inter Variable"')anddocument.fonts.check('14px "JetBrains Mono Variable"')were both true. Computed evidence: body Inter Variable 14/400/20px; h1 Inter Variable 24/600/32px/-0.48px tracking; dashboard count Inter Variable 24/550/32px withtabular-nums; identifier JetBrains Mono Variable 12/400/20px.scripts/verifyandscripts/jobswas left untouched.Commits:
951a575 fix: keep responsive page actions inside content3444388 test: guard responsive table boundaries3444388Final gates:
The browser sweep asserts content-box right-edge safety for every listed route at 1440, 1024, 768, 390, and 320 widths. Screenshots are under
/mnt/hdd/infraternal/artifacts/review-ui-polish/, including:/mnt/hdd/infraternal/artifacts/review-ui-polish/light-1440x900-containers.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-1440x900-containers.png/mnt/hdd/infraternal/artifacts/review-ui-polish/light-390x844-containers.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-390x844-containers.png/mnt/hdd/infraternal/artifacts/review-ui-polish/light-1440x900-container-detail.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-1440x900-container-detail.png/mnt/hdd/infraternal/artifacts/review-ui-polish/light-390x844-container-detail.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-390x844-container-detail.png/mnt/hdd/infraternal/artifacts/review-ui-polish/light-1440x900-hosts.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-1440x900-hosts.png/mnt/hdd/infraternal/artifacts/review-ui-polish/light-390x844-hosts.png/mnt/hdd/infraternal/artifacts/review-ui-polish/dark-390x844-hosts.pngStarting verify-ui-polish on branch
ui-polishat3444388ba5eb6ac35b1e6771fcfe23eb36477fe6. Fetchedorigin/dev; merge target is3acac247fb3e91113d6666ef8e1814ad08b6a7e6. I’ll merge that head, run the requested UI evidence and gates, and report any merge-caused fix separately.Orchestrator: merged to
devatbadd796and pushed; the preview on :7010 now runs this head.Verify, re-run by the orchestrator on the merge head in
.worktrees/dev-check:Step 12c is done: one build, one review (which also fixed the two clipping defects the orchestrator found, plus a Hosts table overflow it found itself), and this verify. Remaining later items, recorded and not looped: the owner's Safari and iOS checklist, and an independent A/B of the +931-byte gzip delta.
Orchestrator note: a second orchestrator session (
d95eac) merged 12c and verified it onbadd796(comment above), while my ownverify-ui-polishjob was running. That job was stopped when.worktrees/ui-polishwas removed, and its checks are superseded by the recorded verify. Also later, from my review of the screenshots: on desktop a container row's second line touches the table's bottom border (the row needs bottom padding); "ACTIONS" is uppercase while the other headers are not; and Docker's status text "Up Less than a second" has a stray capital L. These are folded into step 12b.