From 0f6fd7f06d27fa9860bd04bde13fb4ae3794fdf8 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 15 Sep 2026 21:25:37 -0700 Subject: Spending coins as a headed table instead of chip rows. Every row repeated "expiry", "exit cost", "renewal cost" as pills. The labels now sit once in a header row over right-aligned tabular figures; the table's wrapper scrolls sideways on a screen too narrow for it (the page never does), and it fits a 390px phone without scrolling. A tap anywhere on a row toggles it. A sub-satoshi renewal share reads "< 1 sat". Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01JuwQqNWtDJcxPWtEm9134z --- src/style.css | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index bcec4a5..dd90ec1 100644 --- a/src/style.css +++ b/src/style.css @@ -284,14 +284,22 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si .coin { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--line); } .coin:first-child { border-top: 0; } .coin input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); } -/* per-coin fact pills: each datum wears its own little labeled chip */ -.coin-chips { display: flex; gap: 6px; flex-wrap: wrap; } -.coin-chip { - display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; - border: 1px solid var(--line); border-radius: 999px; - font-size: 11.5px; color: var(--muted); white-space: nowrap; -} -.coin-chip.warn { color: var(--accent-ink); border-color: var(--accent); } +/* the Spending coins table: labels once in the header, numbers right- + aligned in tabular figures; on a narrow screen the WRAPPER scrolls + sideways so the page itself never does */ +.coin-scroll { overflow-x: auto; margin: 4px -2px 0; -webkit-overflow-scrolling: touch; } +.coin-table { border-collapse: collapse; width: 100%; font-size: 13.5px; white-space: nowrap; } +.coin-table th { + text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); + padding: 4px 5px 8px; border-bottom: 1px solid var(--line-strong); +} +.coin-table td { padding: 10px 5px; border-top: 1px solid var(--line); vertical-align: middle; } +.coin-table tbody tr:first-child td { border-top: 0; } +.coin-table th:first-child, .coin-table td:first-child { width: 22px; padding-left: 2px; padding-right: 2px; } +.coin-table .num { text-align: right; font-variant-numeric: tabular-nums; } +.coin-table td.warn { color: var(--accent-ink); font-weight: 600; } +.coin-table tr.clickable { cursor: pointer; } +.coin-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; display: block; } /* ---- review / summary ---- */ .summary { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } -- cgit v1.2.3