diff options
| author | Adam Soltys <[email protected]> | 2026-10-02 14:19:18 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-10-02 14:19:18 -0700 |
| commit | 12b129de5e579e0596c87f65524bd48cfbbe3e87 (patch) | |
| tree | f770d034476a85bec79a870bfd0becb2e1d19793 /src/style.css | |
| parent | af19e72e54b1b3bac210d8c9d74317f662160c18 (diff) | |
| download | coinosv3-12b129de5e579e0596c87f65524bd48cfbbe3e87.tar.gz coinosv3-12b129de5e579e0596c87f65524bd48cfbbe3e87.zip | |
Recovery words stay inside the card
The grid's 1fr columns wouldn't shrink below their words, so an
eight-letter word pushed the third column out past the card's padding.
minmax(0, 1fr) columns, slightly tighter cells, and two columns up to
480px wide (was 420).
Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Dmcrt9KyNDKVWFKnb8BREo
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/src/style.css b/src/style.css index 5bb171a..e9e2186 100644 --- a/src/style.css +++ b/src/style.css @@ -301,12 +301,16 @@ coinos-text[data-empty]:focus::before { content: none; } the way a printed sheet is read. Two columns (a phone) run DOWN instead, the way a hand copies a list: the first column is 1–6, not 1,3,5,…; that row count comes from the word count (--rows-2, set inline). */ -.words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 8px; } +/* minmax(0, 1fr), not 1fr: a 1fr column won't shrink below its word, so an + eight-letter word ("resemble") pushed the third column out past the + card's padding. The cells are a touch tighter so every BIP-39 word (eight + letters at most) still fits whole in a third of a narrow card. */ +.words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .words .w { - display: flex; align-items: baseline; gap: 7px; background: var(--surface2); - border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--mono); + display: flex; align-items: baseline; gap: 5px; background: var(--surface2); min-width: 0; + border: 1px solid var(--line); border-radius: 10px; padding: 9px 8px; font-family: var(--mono); } -.words .w .n { color: var(--faint); font-size: 12px; width: 18px; text-align: right; } +.words .w .n { color: var(--faint); font-size: 12px; width: 16px; flex-shrink: 0; text-align: right; } .words .w .t { font-weight: 600; } .warn-box { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-ink); @@ -412,8 +416,13 @@ hr.divider { margin: 16px 0; } /* ---- how it works ---- */ +/* two columns up to 480px: three thirds of a card that narrow leave an + eight-letter word no room either side */ +@media (max-width: 480px) { + .words { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--rows-2, 6), auto); } +} @media (max-width: 420px) { - .words { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 1fr; grid-template-rows: repeat(var(--rows-2, 6), auto); } + .words { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--rows-2, 6), auto); } .balance .amt { font-size: 28px; } } |