diff options
| -rw-r--r-- | src/features/ark.js | 9 | ||||
| -rw-r--r-- | src/style.css | 9 |
2 files changed, 13 insertions, 5 deletions
diff --git a/src/features/ark.js b/src/features/ark.js index f17acff..0a529c5 100644 --- a/src/features/ark.js +++ b/src/features/ark.js @@ -1499,9 +1499,12 @@ export function arkFeature(ctx) { h('span', { class: g.claimed ? 'tag conf' : 'tag' }, g.claimed ? t('giftClaimedTag') : g.revoked ? t('giftRevokedTag') : t('giftUnclaimedTag'))); })(), - (() => { const pk = zapNoteFor(m); return pk ? ctx.hook('profileChip', pk) : null; })(), - m.status !== 'complete' && !failed ? h('span', { class: 'tag pending' }, m.status === 'pending' ? t('arkExitPendingTag') : m.status) : null), - h('div', { class: 'small faint' }, timeAgo(m.ts / 1000))), + (() => { const pk = zapNoteFor(m); return pk ? ctx.hook('profileChip', pk) : null; })()), + // the status tag sits by the time, not the name: in the narrow wallet + // column the title row has room for the label and the chip, not a + // third thing — the chip was breaking mid-name to make space + h('div', { class: 'row gap6 small faint' }, timeAgo(m.ts / 1000), + m.status !== 'complete' && !failed ? h('span', { class: 'tag pending' }, m.status === 'pending' ? t('arkExitPendingTag') : m.status) : null)), h('div', { style: 'text-align:right' }, // in fiat this is what the payment was worth when it was made h('div', { class: failed ? 'muted' : incoming ? 'amount-pos' : 'amount-neg' }, fmtAmount(m.amountSat, m.ts / 1000))) diff --git a/src/style.css b/src/style.css index 31231fe..460b584 100644 --- a/src/style.css +++ b/src/style.css @@ -359,6 +359,10 @@ textarea.send-dest::placeholder { font-family: var(--sans); } /* ---- lists (tx / utxo) ---- */ .list { display: flex; flex-direction: column; } .item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); } +/* the middle column may shrink: a long name chip beside the label then + ellipsizes on one line instead of breaking mid-name and pushing the + amount about */ +.item > .grow { min-width: 0; } .item:first-child { border-top: 0; } .ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 16px; } .ico.in { background: var(--green-soft); color: var(--green); } @@ -366,7 +370,7 @@ textarea.send-dest::placeholder { font-family: var(--sans); } .amount-pos { color: var(--green); font-family: var(--mono); font-weight: 600; } .amount-neg { color: var(--red); font-family: var(--mono); font-weight: 600; } .amount { font-family: var(--mono); font-weight: 600; } -.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; } +.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; } .tag.pending { background: var(--accent-soft); color: var(--accent-ink); } .tag.conf { background: var(--green-soft); color: var(--green); } @@ -1215,7 +1219,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .profile-banner + .row .profile-avatar { border: 3px solid var(--paper); box-sizing: content-box; } -.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; } +.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; min-width: 0; max-width: 100%; } +.zap-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-avatar.mini { width: 18px; height: 18px; font-size: 8px; flex-shrink: 0; } /* A feed row is the one place a face is the point, not a label on a line — Amethyst gives it 55dp; at our 30px it read as a bullet beside the post. |