Show the gesture, and offer the full text when the card clips

Two faults behind one report. The card clipped long descriptions, and it
never rendered the how field at all - so for SHIFT + REMAIN, where the
instruction IS a three-second hold, the most important part was missing
rather than merely shortened.

Measured rather than assumed: that entry is Live mode, how is "Hold
SHIFT, hold REMAIN 3 s", desc is 112 characters, and the pair renders
43px tall into a 29px two-line clamp. A full line was being lost.

The gesture now leads the card text in the accent colour, and a MORE
button opens a sheet with the combo, the gesture, the full description,
the modes it applies in and the manual page. Whether to offer MORE is
decided by measuring scrollHeight against clientHeight, not by guessing
a character count, so it appears exactly when text is really cut. 39 of
159 entries qualify: 24 carry a gesture, 17 have a description over 110
characters.

The card stays 84px because the panel needs that space, so a sheet is
the right place for the overflow, as in the reference.

141 tests, typecheck clean, installed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-17 21:10:41 +03:00
parent 6889167fcf
commit 6ddf6f9a77
4 changed files with 119 additions and 8 deletions

View File

@@ -112,3 +112,29 @@
.sheetLabel:first-child {
margin-top: 0;
}
/* The detail sheet: what the 84px card cannot hold. */
.detailCombo {
margin: 0;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--accent);
}
/* The gesture is the instruction for the 24 entries that have one. */
.detailHow {
margin: 0;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.detailBody {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--muted);
text-wrap: pretty;
}