kayg/infraternal

Watch

Fork 0

Icon and text share one centre line in every shared icon + label component (tick next to "Ready") #282

New issue

Closed

opened 2026-11-01 08:37:33 +00:00 by kayg · 3 comments

kayg commented

2026-11-01 08:37:33 +00:00

Owner

Owner feedback on the mockups (kayg, 2026-11-01, relayed by the orchestrator, job J52):

"you need to make sure everything is correctly horizontally aligned as the tick icon and the text to the right aren't"

Screenshot: a status row "✓ Ready" (check-circle icon + text) under a LAN card with a "Test this LAN" button (Boot Machines, #156): the icon sits off the text's centre line.

Fix at the source, not per screen: the shared icon + label components in packages/ui (status rows, chips, icon buttons, list rows) get one centre line (flex, align-items: center, cap-height-aware icon size, no baseline drift). Audit every mockup and product screen that uses them. A Playwright check measures icon vs text vertical centres (≤ 0.5 px) on representative components. TASTE row on taste-2026-11-01. Related: #156.

Owner feedback on the mockups (kayg, 2026-11-01, relayed by the orchestrator, job J52): > "you need to make sure everything is correctly horizontally aligned as the tick icon and the text to the right aren't" Screenshot: a status row "✓ Ready" (check-circle icon + text) under a LAN card with a "Test this LAN" button (Boot Machines, #156): the icon sits off the text's centre line. Fix at the source, not per screen: the shared icon + label components in `packages/ui` (status rows, chips, icon buttons, list rows) get one centre line (flex, `align-items: center`, cap-height-aware icon size, no baseline drift). Audit every mockup and product screen that uses them. A Playwright check measures icon vs text vertical centres (≤ 0.5 px) on representative components. TASTE row on `taste-2026-11-01`. Related: #156.

kayg commented

2026-11-01 09:41:17 +00:00

Author

Owner

J52: icon and text share one centre line (branch mockups-2026-10-31, head 4c389a2f4; commit b7d6d1362). TASTE row on taste-2026-11-01 (2b3957574).

Cause, measured on the original head: in "✓ Ready" the icon's centre was 352.28 px and the text's 350.78 px, so 1.5 px low. The shared status line had no alignment of its own and each screen nudged the icon with margin-top: 3px on a row with align-items: flex-start, which is right for one font size only. Fix at the source: status-line.ts now owns its row (.ui-status-line) and its icon cell is exactly one text line tall (1lh) with the glyph centred in it, so the icon sits on the first line's centre at any size and when the sentence wraps. Now 0.57 px at the real 13 px (before/after crops attached, with a red guide at the text's centre).

Audit of every screen. apps/tracer/test/icon-text-audit.ts runs in the page and pairs every icon with the text beside it, whatever component drew it. It found the same drift elsewhere, from one cause: labels with a numeric line-height below the font's own height. The browser floors the half-leading to a whole pixel, so glyphs sat up to 0.9 px off the icon's centre: palette rows 0.92, menu items, tabs and the USB button 0.75, sign-out 0.58, the pencil beside a name 2.5 px. --ui-type-button is now .../normal (every control using it has a fixed height and centres its content); the palette label, the sign-out label and the name line take line-height: normal too; the pencil is centred on the name's first line with 1lh.

icon-text-centre.spec.ts (16 tests, 16/16 pass): nine screens at 1440 and 393 px (Boot Machines before and after "Test this LAN", sidebar, palette, row menu, details popover, person's card, session manager, machine card), every pair within 0.5 px by line box and by capital letters; the status line held to 1 px at 11, 13, 16 and 20 px and when wrapped (a line box is quantised to a whole pixel, so an arbitrary size is not exact: 0.3 to 0.9 px, 0.57 at 13 px). Before the fix the audit flagged about two dozen pairs on these screens.

Not changed: the font's metrics (ascent-override would move the terminal's cells too); text-box-trim (not in Firefox). An icon button beside a separate pill is not a pair.

**J52: icon and text share one centre line** (branch `mockups-2026-10-31`, head `4c389a2f4`; commit `b7d6d1362`). TASTE row on `taste-2026-11-01` (`2b3957574`). **Cause**, measured on the original head: in "✓ Ready" the icon's centre was 352.28 px and the text's 350.78 px, so 1.5 px low. The shared status line had no alignment of its own and each screen nudged the icon with `margin-top: 3px` on a row with `align-items: flex-start`, which is right for one font size only. **Fix at the source:** `status-line.ts` now owns its row (`.ui-status-line`) and its icon cell is exactly one text line tall (`1lh`) with the glyph centred in it, so the icon sits on the first line's centre at any size and when the sentence wraps. Now 0.57 px at the real 13 px (before/after crops attached, with a red guide at the text's centre). **Audit of every screen.** `apps/tracer/test/icon-text-audit.ts` runs in the page and pairs every icon with the text beside it, whatever component drew it. It found the same drift elsewhere, from one cause: labels with a numeric `line-height` below the font's own height. The browser floors the half-leading to a whole pixel, so glyphs sat up to 0.9 px off the icon's centre: palette rows 0.92, menu items, tabs and the USB button 0.75, sign-out 0.58, the pencil beside a name 2.5 px. `--ui-type-button` is now `.../normal` (every control using it has a fixed height and centres its content); the palette label, the sign-out label and the name line take `line-height: normal` too; the pencil is centred on the name's first line with `1lh`. `icon-text-centre.spec.ts` (16 tests, 16/16 pass): nine screens at 1440 and 393 px (Boot Machines before and after "Test this LAN", sidebar, palette, row menu, details popover, person's card, session manager, machine card), every pair within 0.5 px by line box and by capital letters; the status line held to 1 px at 11, 13, 16 and 20 px and when wrapped (a line box is quantised to a whole pixel, so an arbitrary size is not exact: 0.3 to 0.9 px, 0.57 at 13 px). Before the fix the audit flagged about two dozen pairs on these screens. Not changed: the font's metrics (`ascent-override` would move the terminal's cells too); `text-box-trim` (not in Firefox). An icon button beside a separate pill is not a pair.

282-ready-row-before.png

34 KiB

282-ready-row-after.png

34 KiB

kayg referenced this issue

2026-11-01 09:41:54 +00:00

Own context menu and swipe actions on rows (Views tree first) #242

kayg commented

2026-11-01 13:38:39 +00:00

Author

Owner

Finish: icon-text-centre-282 (product branch), head 6b33af26a79ce3987315aac7d01263d8c195e1be.

test/icon-text-centre.spec.ts (sidebar, palette, details popover, Settings toolbar/shortcuts; icon and text centre lines within 0.5 px): on origin/dev 4 fail, 2 skip, 2 pass; on this branch 6 pass, 2 skip. Merging with ui-size-283 conflicts in two styles.css hunks: take the rem lines and keep line-height: normal.

**Finish: `icon-text-centre-282` (product branch), head `6b33af26a79ce3987315aac7d01263d8c195e1be`.** `test/icon-text-centre.spec.ts` (sidebar, palette, details popover, Settings toolbar/shortcuts; icon and text centre lines within 0.5 px): on origin/dev 4 fail, 2 skip, 2 pass; on this branch 6 pass, 2 skip. Merging with `ui-size-283` conflicts in two `styles.css` hunks: take the rem lines and keep `line-height: normal`.

kayg commented

2026-11-04 17:04:39 +00:00

Author

Owner

J210 owner-authorized housekeeping: closing this completed scope because its work is merged on dev in c2c0a65f1. Verified the merge commit is an ancestor of current origin/dev. The implementation reports and evidence remain in this issue.

J210 owner-authorized housekeeping: closing this completed scope because its work is merged on dev in [c2c0a65f1](https://git.kayg.org/kayg/infraternal/commit/c2c0a65f162e46be1bbdbc60232305cd16d1b74b). Verified the merge commit is an ancestor of current origin/dev. The implementation reports and evidence remain in this issue.

kayg closed this issue

2026-11-04 17:04:39 +00:00

kayg referenced this issue

2026-11-04 17:07:06 +00:00

J210: overnight housekeeping, 2026-11-04 #350

kayg referenced this issue

2026-11-10 15:23:56 +00:00

J478: housekeeping 2026-11-10, 60 old origin branches archived #487

kayg referenced this issue

2026-11-10 15:26:24 +00:00

J478: housekeeping 2026-11-10, 60 old origin branches archived #487

kayg referenced this issue