From 848c3edd115360739b5680fec45ef6b71b3b9c1c Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 13 Sep 2026 09:06:24 -0700 Subject: Bigger faces in the feed. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Measured on a Pixel 9: Amethyst gives a feed avatar 55dp, we gave it 30 — the same circle the inbox and chat rows use, where a face is a label on a line. In a feed the face is the point. Feed rows now get 44px; everywhere else is untouched. The catch, and the reason this isn't a one-line change: the cached thumbnail was 96px square, sized for a 30px circle at 3x. A 44px circle no longer fits inside it, and the fallback is to layer the ORIGINAL over the thumbnail — which for a feed of twenty rows means twenty full-size downloads, one of which in this wallet's own cache was a 5MB JPEG. That is exactly the slow-avatar problem we already fixed once. So the thumbnail grows with the circle: 144px, which covers 44 at 3x with room to spare. Faces cached at the old size are remade once (thumbPx says which size a thumbnail was made for), and the old one keeps painting meanwhile, so nobody watches a grey circle while it happens. The per-face cap goes 9000 → 16000 chars and the shared budget 180k → 280k, both scaled to the new size: the busiest picture on hand measures 12827 chars at 144px, and at the old cap it would have been rejected and left fetching its original forever. avatar-thumb-test gains the guard that would have caught all of this: the thumbnail must cover the biggest circle in the app at 3x. It failed at 128px (132 needed) — which is why THUMB_PX is 144 and not 128. Its redirect assertion was also order-dependent — the seed writes the profile into every wallet's cache but only the painted one makes a thumbnail, so it asked the first row and got a coin toss. It takes the best copy now. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 0f0ce3d..a16101c 100644 --- a/src/style.css +++ b/src/style.css @@ -700,6 +700,11 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } } .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; } .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. + The thumbnail we cache is sized to cover this (see THUMB_PX), so a bigger + circle costs no extra network. */ +.chat-avatar.note-avatar { width: 44px; height: 44px; font-size: 15px; } .chat-avatar.fallback { position: relative; overflow: hidden; } .chat-avatar.fallback .punk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .header-avatar { padding: 0; border: none; background: none; cursor: pointer; display: flex; } -- cgit v1.2.3