ncode
6ddf6f9a77
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>
141 lines
2.4 KiB
CSS
141 lines
2.4 KiB
CSS
/* Heights come from the tokens, which carry the measured 360x735 budget:
|
|
8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735, with no bottom padding. */
|
|
|
|
.app {
|
|
height: 100dvh;
|
|
padding: var(--gap) var(--gap) 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.strip {
|
|
height: var(--strip-h);
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.picker {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
background: var(--card);
|
|
border: var(--outline);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
letter-spacing: 0.06em;
|
|
text-align: left;
|
|
}
|
|
|
|
.picker b {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.count {
|
|
flex: 0 0 auto;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.panel {
|
|
height: var(--panel-h);
|
|
flex: 0 0 auto;
|
|
background: var(--body);
|
|
border: var(--outline);
|
|
box-shadow: var(--shadow);
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.placeholder {
|
|
margin: 0;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.info {
|
|
height: var(--info-h);
|
|
flex: 0 0 auto;
|
|
background: var(--card);
|
|
border: var(--outline);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.nav {
|
|
height: var(--nav-h);
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
background: var(--card);
|
|
border: var(--outline);
|
|
}
|
|
|
|
.tab,
|
|
.tabOn {
|
|
flex: 1;
|
|
background: none;
|
|
border: 0;
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav button + button {
|
|
border-left: var(--outline);
|
|
}
|
|
|
|
.tabOn {
|
|
background: var(--accent);
|
|
color: var(--on-accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Group headings inside a sheet: Deck, Direction, Answering. */
|
|
.sheetLabel {
|
|
margin: 8px 0 2px;
|
|
font-family: var(--mono);
|
|
font-size: 9px;
|
|
letter-spacing: 0.12em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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;
|
|
}
|