From baabeb0f4f91ca04090d4e36551197dc43d5f41f Mon Sep 17 00:00:00 2001 From: Timmy Date: Wed, 21 Oct 2026 12:15:25 +0000 Subject: [PATCH] fix(privacy): give training-contribution rows a readable layout (#24) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The opt-in row and its tombstone rendered as one run-on line ('Type 4 · brownReceipt contrib-…', 'Withdrawn Oct 21, 12:09 PMraw image, …') because nothing styled .contribution-row: the label and the receipt/artifact line shared a line and the Withdraw control butted against the text. Split label and detail into their own lines, right-align the row action, mute withdrawn tombstones, and keep long receipt ids wrapping inside the card. Verified on a 390px viewport: queued, withdrawn, and offer rows are separately legible with no horizontal overflow. --- styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/styles.css b/styles.css index a8fc520..d6c2fcb 100644 --- a/styles.css +++ b/styles.css @@ -59,3 +59,14 @@ main{display:block}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;t .chat-citation{min-height:32px;padding:5px 10px;border:1px solid #bcdfd4;border-radius:999px;background:var(--surface);color:var(--teal);font-weight:800;font-size:11px;cursor:pointer} .chat-citation:active{background:#e9f5f0} .chat-unverified{margin:9px 0 0;padding-top:8px;border-top:1px solid rgba(55,40,31,.09);font-size:11px;line-height:1.4;font-weight:700;color:#8a5a12} + +/* Issue #24 — an opt-in receipt and its tombstone must read as separate facts, not one run-on line. */ +.contribution-list{display:flex;flex-direction:column;margin-top:10px} +.training-consent h3{font-size:13px;margin:16px 0 2px} +.contribution-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)} +.contribution-row:first-child{border-top:0} +.contribution-row>div{display:flex;flex-direction:column;gap:3px;min-width:0} +.contribution-row strong{font-size:13px;line-height:1.3} +.contribution-row span{font-size:11px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere} +.contribution-row .btn{min-height:40px;padding:0 14px;font-size:12px;flex:0 0 auto} +.contribution-row.withdrawn strong{color:var(--muted)}