aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/features/messages.js6
-rw-r--r--src/style.css22
-rw-r--r--tools/chat-layout-test.js14
3 files changed, 29 insertions, 13 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 715400e..ae310a6 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -2859,7 +2859,7 @@ export function messagesFeature(ctx) {
avatar(ev.pubkey, 'chat-avatar mini', false),
h('span', { class: 'quote-name' }, displayName(ev.pubkey)),
h('span', { class: 'small faint', style: 'white-space:nowrap' }, timeLabel(ev.created_at * 1000))),
- h('div', { class: 'small', style: 'white-space:pre-wrap;overflow-wrap:anywhere' },
+ h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' },
// one level deep only: a quote of a quote of a quote is a rabbit
// hole, and the inner one stays a link you can follow
...noteBody(ev.content, depth + 1)));
@@ -3244,7 +3244,7 @@ export function messagesFeature(ctx) {
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)
- style: 'font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer',
+ style: 'font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer',
onClick: (e) => { e.stopPropagation(); openProfile(pk); },
}, name),
h('span', { class: 'small faint', style: 'white-space:nowrap' },
@@ -3257,7 +3257,7 @@ export function messagesFeature(ctx) {
style: 'flex-shrink:0',
onClick: (e) => { e.stopPropagation(); ui.noteSheet = ev; render(); },
}, '\u22ef')),
- h('div', { class: 'small', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...noteBody(ev.content)),
+ h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...noteBody(ev.content)),
pending ? null : noteActions(pk, ev, { canZap })));
}
diff --git a/src/style.css b/src/style.css
index 32e30d9..0f0ce3d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -104,6 +104,13 @@ h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
+/* The reading size for a post or a message — the copy you actually read,
+ as opposed to a caption or a row subtitle, which is what .small is for.
+ Post bodies wore .small (13px) and a feed of them read like footnotes on
+ a phone. 16px is Amethyst's own default for a note body, and at the
+ inherited 1.45 line-height the line pitch lands within a pixel of what
+ Amethyst renders. Measured on a Pixel 9, side by side. */
+.note-text { font-size: 16px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.break { word-break: break-all; }
@@ -408,7 +415,7 @@ hr.divider { margin: 16px 0; }
.chat-avatar.spacer { background: transparent; height: 0; }
.chat-body { min-width: 0; flex: 1; }
.chat-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
-.chat-name { font-size: 14px; font-weight: 650; }
+.chat-name { font-size: 15px; font-weight: 650; }
.chat-badge {
font-size: 10px; font-weight: 650; color: var(--accent-fg); background: var(--accent);
border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px;
@@ -417,7 +424,7 @@ hr.divider { margin: 16px 0; }
.chat-bubble {
position: relative; display: inline-block; max-width: 100%;
background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
- padding: 7px 11px; font-size: 15px; line-height: 1.45;
+ padding: 7px 11px; font-size: 16px; line-height: 1.45;
overflow-wrap: break-word; white-space: pre-wrap;
}
/* the messages surfaces run edge to edge on phones, like the notes feed —
@@ -507,10 +514,10 @@ hr.divider { margin: 16px 0; }
/* Messages v2 — home lists, DM threads, invite panel. */
.chat-back { font-size: 22px; line-height: 1; padding: 2px 10px 4px; flex-shrink: 0; }
.chat-thread-row { display: flex; gap: 10px; align-items: center; cursor: pointer; }
-/* list rows read at message size: names 15, previews/member counts 14 —
- the generic .small (12px) made the inbox feel like fine print */
-.chat-thread-row .chat-name { font-size: 15px; }
-.chat-thread-row .small { font-size: 14px; }
+/* list rows read at message size: names 16, previews/member counts 15 —
+ the generic .small (13px) made the inbox feel like fine print */
+.chat-thread-row .chat-name { font-size: 16px; }
+.chat-thread-row .small { font-size: 15px; }
.chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-when { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
@@ -591,7 +598,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
.quote-card.clickable { cursor: pointer; }
.quote-card.clickable:hover { border-color: var(--line-strong); }
.quote-loading { flex-direction: row; align-items: center; gap: 8px; }
-.quote-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.quote-card .note-text { font-size: 14px; }
+.quote-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-card .note-img { max-height: 220px; }
.quote-card .yt-embed { margin-top: 4px; }
diff --git a/tools/chat-layout-test.js b/tools/chat-layout-test.js
index f39b87e..853aafa 100644
--- a/tools/chat-layout-test.js
+++ b/tools/chat-layout-test.js
@@ -8,6 +8,11 @@ import puppeteer from 'puppeteer-core';
import { generateMnemonic } from '@scure/bip39';
import { wordlist } from '@scure/bip39/wordlists/english';
import { buildHtml } from '../build.js';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+// the shot goes somewhere every machine has, not one session's scratch dir
+const shotPath = join(tmpdir(), 'chat-layout.png');
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
let ok = true;
@@ -38,7 +43,7 @@ try {
await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
await page.reload({ waitUntil: 'domcontentloaded' });
await sleep(400);
- await click('button', 'I already have a wallet');
+ await click('button', 'Get started');
await sleep(300);
await click('button', 'Import existing');
await sleep(300);
@@ -46,7 +51,10 @@ try {
await page.type('textarea', generateMnemonic(wordlist));
await click('button', 'Open wallet');
await waitText('receive', 15000);
- await page.evaluate(() => document.querySelector('.header-msgs')?.click());
+ // .header-msgs is the shared header-button class — settings, lock and
+ // search wear it too, and the first one is no longer this one
+ await page.evaluate(() => [...document.querySelectorAll('button')]
+ .find((b) => /message/i.test(b.getAttribute('aria-label') || ''))?.click());
await sleep(800);
await click('button', 'Create');
await sleep(300);
@@ -86,7 +94,7 @@ try {
}
await page.setViewport({ width: 1280, height: 800 });
await sleep(500);
- await page.screenshot({ path: '/tmp/claude-1000/-home-adam-halwallet/11ef6049-3f7a-4687-a8e8-79c6f9403a6b/scratchpad/chat-layout.png' });
+ await page.screenshot({ path: shotPath });
console.log('\n[the channel header]');
const one = await page.evaluate(() => ({
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 05:23:13 +0000