diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 8 | ||||
| -rw-r--r-- | src/style.css | 5 |
2 files changed, 9 insertions, 4 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index fb2986f..31a3e4d 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -6403,10 +6403,10 @@ export function messagesFeature(ctx) { const openable = open && !pending; if (!pending) watchZaps([ev.id]); return h('div', { - class: 'row', + class: 'row note-post', 'data-zap-post': ev.id, 'data-focus-note': focus ? '1' : undefined, - style: 'gap:10px;align-items:flex-start;padding:10px 0' + style: 'padding:10px 0' + (openable ? ';cursor:pointer' : '') + (pending ? ';opacity:.55' : '') // joined: the reply box continues this highlight below, so the @@ -6419,8 +6419,8 @@ export function messagesFeature(ctx) { // the avatar is its own tap-target (profile), even inside an openable // row — its handler stops propagation, so the row still opens the thread avatar(pk, 'chat-avatar note-avatar'), - h('div', { class: 'col grow', style: 'min-width:0;gap:3px' }, - h('div', { class: 'row between', style: 'align-items:center;gap:8px' }, + h('div', { class: 'note-content' }, + h('div', { class: 'row between note-header', style: 'align-items:center;gap:8px' }, h('div', { class: 'row', style: 'gap:7px;align-items:baseline;min-width:0' }, h('span', { // the name, like the avatar, is its own tap-target (profile) diff --git a/src/style.css b/src/style.css index 2facddc..6507ba5 100644 --- a/src/style.css +++ b/src/style.css @@ -626,6 +626,11 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } /* The row under a post: reply, boost, quote, react, zap — spread across the post's full width so each is a comfortable target, quiet until one carries a count or you've used it. */ +.note-post { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; align-items: center; } +.note-content { display: contents; } +.note-content > * { grid-column: 1 / -1; min-width: 0; } +.note-content > .note-header { grid-column: 2; grid-row: 1; } +.note-content > .note-text { font-size: 18px; line-height: 1.5; } .note-acts { margin-top: 8px; gap: 4px; width: min(100%, 340px); } .note-acts > .note-act { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 2px; } /* server comparison table (Settings → Advanced → Ark server) */ |