Posts and messages get a reading size.

A feed of posts was set in .small — 13px, the size used for captions and
row subtitles. On a phone it read like footnotes. Measured against
Amethyst on the same Pixel 9, side by side: its note body renders a line
pitch of 62 device pixels, ours 50.

Post bodies get their own class at 16px, which is Amethyst's own default
for a note body, and chat and DM bubbles move 15 → 16 to match; the names
and inbox previews above them keep pace. New line pitch measured on the
phone: 60 against Amethyst's 62. A quoted note inside a post stays a step
smaller, since it's context rather than the post you're reading.

Worth recording for whoever reads this next: this phone has the Android
font scale at 1.15. Amethyst uses sp and honours that automatically; CSS
px in a TWA does not, and there's no way for a page to read that setting.
So Amethyst will still render about 15% larger than us on this device no
matter what we pick. Matching its DEFAULT is the target that makes sense
for everyone else.

chat-layout-test had rotted (onboarding copy, .header-msgs now matching
the settings button, a screenshot path from another machine's scratch
dir) — repaired, and it's what proves the composer still fits at the
larger size, on all three viewports.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx

1 files changed, 11 insertions, 3 deletions

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(() => ({