Skip to content

fix(projects): three measured density bugs on the project page - #470

Merged
github-actions[bot] merged 2 commits into
mainfrom
fix/project-page-polish
Sep 3, 2026
Merged

fix(projects): three measured density bugs on the project page#470
github-actions[bot] merged 2 commits into
mainfrom
fix/project-page-polish

Conversation

@catomean

@catomean catomean commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Follow-up to #468, found by opening the deployed page in a real browser and measuring it — not by reading the diff. Replaces #469, which was cut before #468's squash merge and therefore conflicted and ran zero CI silently.

1. A clamp that clamped nothing

line-clamp-3 clamps line boxes of inline content, but the description renders inside DescriptionEditor's full-width <button>, which produces none in the wrapper. Computed display came back flow-root instead of -webkit-box; the element measured 386px tall with a 386px scrollHeight. It reported itself as applied (webkitLineClamp: "3") while doing nothing. Now a max-height, which does not care what the child element is.

2. The widget you still had to hunt for

Giving Feedback its own tab fixed where it lives, not whether you can see it — the panel is 1,054 words and setup sat behind a button labelled only "Widget". That is the original report: someone came to put the widget on a site, did not find it, concluded the project had none. It had one, and it was live.

Widget state is now always on screen — ● Widget live · fleetcrown.orangecat.ch with Manage. Only the controls stay behind a click. Three distinct states, because "we minted a token" and "it is actually running" are different facts: live (observed boot heartbeat) / paused / enabled-but-never-seen.

3. 425 characters in a 228px column

The worst of the three, and the same disease as the header one level down.

Mission value 425 characters
Rendered width 228px (~30 chars/line)
Rendered height 296px
Readable measure 45–75 chars/line

Not accidental: each row laid out horizontally at sm+ as 128px label + gap + 80px of always-visible Edit/Delete icons inside a 440px grid column. That leaves 228px. With 16 rows the tab carried 32 icon buttons competing with the text they act on.

Label now sits above the value; row actions are lifted out of flow and revealed on hover. The prose gets the whole column.

Not hidden, only quiet: :focus-within reveals them for keyboard users, and a coarse pointer — which has no hover at all — always shows them. The aria-labels were already correct ("Edit Mission", "Delete Vision"), so this changes visual weight, not accessibility.

The reveal is a ui-row-actions class in globals.css rather than inline variants: this repo keeps pointer-coarse behaviour in one place on purpose, and Tailwind 4 drops @layer components rules under variants, so hover/focus are written as real selectors.

Verification

npm run verify exits 0, including check:design (9 checks).

One non-finding, recorded: a 390px probe reported every tab at 20px, under the 44px touch floor. False positive — the floor lives in @media (pointer: coarse) and a resized desktop browser reports a fine pointer, so ui-tap correctly did nothing. .ui-tap is in the coarse min-height: 2.75rem list; real phones get 44px. The probe was wrong, not the code.

…ad to hunt for

Both found by opening the deployed page and measuring it, not by reading
the diff.

1. The description clamp did nothing. `line-clamp-3` clamps LINE BOXES of
   inline content, but the description renders inside DescriptionEditor's
   full-width <button>, which produces none in the wrapper. Computed
   display came back `flow-root` instead of `-webkit-box`, and the element
   measured 386px tall with a 386px scrollHeight — a clamp that reported
   itself as applied (`webkitLineClamp: "3"`) while clamping nothing.
   A max-height does not care what the child element is.

2. The widget was still behind a click. Moving Feedback into its own tab
   fixed where it lives, not whether you can see it: the panel is still
   1,054 words and widget setup was still behind a button labelled only
   "Widget". That is the exact shape of the original report — someone
   came to put the widget on a site, did not find it, and concluded the
   project had no widget. It had one, and it was live.

   Widget STATE is now always on screen — a one-row status line with a
   dot, "Widget live / paused / enabled, not seen yet", the origin, and a
   Manage button. Only the CONTROLS stay behind a click. The three states
   are distinct on purpose: "live" is the observed boot heartbeat, and a
   token that exists but has never been seen is genuinely different from
   one that is working.

   The toggle now says "Widget setup" / "Hide widget setup" rather than
   "Widget", and carries aria-expanded.
…s a wall

Measured on the deployed Context tab: the Mission value was 425 characters
rendered 228px wide and 296px tall — roughly 30 characters a line, when
readable prose wants 45 to 75.

The column was not narrow by accident. Each attribute row laid out
horizontally at sm+: a 128px label, a gap, and 80px of permanently visible
Edit and Delete icons, inside a 440px grid column. That leaves 228px. With
16 rows the tab also carried 32 icon buttons competing for attention with
the text they act on.

Label now sits above the value, and the row actions are lifted out of flow
and revealed on hover. The prose gets the whole column.

The reveal is a `ui-row-actions` class in globals.css rather than inline
variants, for two reasons: this repo keeps pointer-coarse behaviour in one
place on purpose, and Tailwind 4 drops `@layer components` rules under
variants — so the hover and focus states are written as real selectors.

Not hidden, only quiet: `:focus-within` reveals them for keyboard users,
and a coarse pointer (which has no hover at all) always shows them. The
aria-labels were already correct — "Edit Mission", "Delete Vision" — so
this changes visual weight, not accessibility.
@github-actions
github-actions Bot merged commit 9c66e06 into main Sep 3, 2026
3 checks passed
@github-actions
github-actions Bot deleted the fix/project-page-polish branch September 3, 2026 11:54
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