OverviewFilesCommitsIssuesDocsReleasesPeers

favela-surface commits / 81ae5e3

0.0.44: a post carries one set of controls, not two
`margin-left:auto` pushed the emoji palette to the far edge, so four words sat at one end of the row and three emoji at the other with a hole between them — and the post read as carrying two unrelated toolbars. Mastodon spreads ONE set of actions across the row (.status__action-bar); it does not have two. Removing the auto margin and spreading the row gives five evenly placed groups — measured at 1280px: 554px wide, items at 0/113/237/343/453, one line. ⚠ The words stay. The reported defect was two toolbars, not four verbs, and icon-only would drop a text label without adding the aria-label to replace it. The counts stay absent too: peer.js refuses to produce one, because a number rendered here counts only what this node can see and would read as a global total. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
81ae5e37db79492b306f63754a75b1a6278ab2d4
by plankatron <fleeky@gmail.com> · 2026-09-07T21:35:06.000Z

Changed files (3) +23 -3

lib/pages.js +7 -2
……@@ -348,7 +348,12 @@ ul.people li{border-top:1px solid var(--line);padding:var(--s2) 0}
348348/* ⚠ 18px between actions and 16px above them — mastodon's own numbers (.status__action-bar).
349349 Ours were 2px and 11px, which is why seven controls read as one cramped cluster rather than as
350350 seven things you can choose between. */
351.reactions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:1rem}
351/* ⛔ ONE toolbar, spread across the row — the shape of mastodon's .status__action-bar.
352 The palette used to be pushed to the far edge with margin-left:auto, so four words sat at one end
353 and three emoji at the other with a hole between them, and the post read as carrying two
354 unrelated sets of controls. It carries one. */
355.reactions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:1rem;
356 justify-content:space-between}
352357.reactions form{margin:0;display:inline-flex}
353358.reactions button,.reactions .go{border:0;background:transparent;color:var(--dim);font-size:14px;
354359 padding:.25rem .3rem;border-radius:6px;text-decoration:none;cursor:pointer}
……@@ -356,7 +361,7 @@ ul.people li{border-top:1px solid var(--line);padding:var(--s2) 0}
356361.reactions button.liked{color:var(--accent);font-weight:600}
357362/* ⛔ A flex ITEM is not a flex container. The palette was a span holding inline-block buttons, so
358363 they wrapped INSIDE it and stacked into a column down the right of every post. */
359.reactions .quick{display:inline-flex;gap:10px;margin-left:auto}
364.reactions .quick{display:inline-flex;gap:10px}
360365/* Only the ones NOT yet added are dimmed. A reaction you hold is on, and dimming it would say the
361366 opposite of what it means. */
362367.reactions .quick button{opacity:.55}
package.json +1 -1
……@@ -1,6 +1,6 @@
11{
22 "name": "favela-surface",
3 "version": "0.0.43",
3 "version": "0.0.44",
44 "description": "The favela renderer \u2014 server-side HTML over the daemon's socket. No storage, no keys, no swarm.",
55 "type": "module",
66 "main": "index.js",
test/nav.test.js +15 -0
……@@ -40,3 +40,18 @@ test('⛔ the narrow layout is unchanged — it is the one that has to work ever
4040 t.ok(/nav\{[^}]*flex-wrap:wrap/.test(base), 'still wraps when it must')
4141 t.ok(/body\{[^}]*max-width:38rem/.test(base), 'and the column is still the column')
4242})
43
44// ── the action row is ONE toolbar ─────────────────────────────────────────────────────────────
45
46test('★ the reaction palette is not pushed to the far edge', async (t) => {
47 const { post, layout } = await import('../lib/pages.js')
48 const html = layout('x', post({ author: 'ab'.repeat(32), collection: 'post', name: 'p1', body: 'hi', createdAt: '2026-09-01T00:00:00Z' }, null))
49 const css = html.slice(html.indexOf('<style>'), html.indexOf('</style>'))
50 const rule = css.slice(css.indexOf('.reactions .quick{'))
51 // ⛔ `margin-left:auto` put the emoji at the far right with a gap in the middle, so four words at
52 // one end and three emoji at the other read as two unrelated toolbars. Mastodon spreads one set
53 // of actions across the row; it does not have two.
54 t.absent(/^\.reactions \.quick\{[^}]*margin-left:auto/.test(rule), 'the palette is not shoved right')
55 const bar = css.slice(css.indexOf('.reactions{'), css.indexOf('.reactions form'))
56 t.ok(/justify-content:space-between/.test(bar), 'the row spreads its items instead')
57})