jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Design canvas: fix key label fit; direction settled

Browse Source 
RESAMPLE still sat flush against its border after the soft hyphen,
because the type was simply too large for the button. A left-block
button is 35.9px wide, leaving 27.9px of usable text width once the
2px borders and padding are removed; SAMPLE at 8px with .03em tracking
measured ~27.8px.

Key labels drop to 7px with no tracking and 1px side padding, which
gives SAMPLE 6.8px of headroom and REVERSE 2.3px. SHIFT, the longest
label in the six-button bank row, gets flex:1.25 - the hardware makes
that button wider too.

Direction settled: A (manual, light) with the dark counterpart. It will
be implemented in the React port rather than retrofitted onto the
Phase 1 vanilla app, so the UI is only built once.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Georgi Durankiev
2026-09-17 00:24:57 +03:00
parent 12a86fb5db
commit e2e9fcddb5
3 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
design/canvas/ManualDrill.dc.html
View File

@@ -11,10 +11,12 @@
<style>
body { margin: 0; }
a { color: #FF4A00; } a:hover { color: #C43900; }
/* 7px, no tracking, 1px side padding — see Main.dc.html for the measurement. */
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:7px;
line-height:1.05; letter-spacing:0; padding:2px 1px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.grp:last-child .col:last-child .btnrow .k:last-child { flex:1.25; }
.lit { background:#FF4A00; color:#111111; font-weight:700; }
.pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }