History rows no longer wrap: the recipient's name chip keeps to one line (ellipsized when it must) and the "in progress" tag sits beside the time, not in the title row where it broke the name mid-word in the narrow wallet column

Co-Authored-By: Claude Fable 5.1 <[email protected]>

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.