26af9fa · favela-surface

favela-surface commits / 26af9fa

0.0.45: the file control stops looking like an accident

The browser draws an OS button and the words "No file chosen" — the only
unstyled element on the surface, on both the composer and settings, and most of
why the composer read as unfinished.

::file-selector-button styles the button and KEEPS the filename. The usual trick
— hide the input, style a label — throws that away, and with no JavaScript
nothing else on the page can tell you which file you picked.

⚠ TYPE SCALE: no change, and the audit item that asked for one was under-argued.
Measured, a one-line post's 144px is padding 32, byline 28.6, action bar 46, and
26px of text. Mastodon's .status uses the same 16px padding, and their
.status__action-bar__button-wrapper{flex-grow:1;flex-basis:0} is the row spread
0.0.44 just adopted. What is left is body line-height 1.6 against their 1.43 —
defensible when a post here is markdown with headings, lists and code rather
than 280 characters. I never measured their per-post height, so "ours is 144px"
had nothing to compare against; tightening on that basis would have been
fiddling with a number I had not earned.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

26af9faae601ec5c983854704274ab685bbaf53a

by plankatron <fleeky@gmail.com> · 2026-09-07T21:37:01.000Z

Changed files (3) +23 -2

lib/pages.js +10 -1

…	…	@@ -269,7 +269,16 @@ button.liked{font-weight:700;border-color:var(--accent);color:var(--accent)}
269	269	#at li{padding:.35rem .6rem;border-radius:6px;cursor:pointer;font-size:14px}
270	270	#at li span{color:var(--dim)}
271	271	#at li.on{background:var(--bg-soft)}
272		.composer input[type=file]{font-size:13px;max-width:14rem;color:var(--dim)}
	272	/* ⛔ The only unstyled control on the page: the browser draws an OS button and the words "No file
	273	chosen", and it is most of why the composer read as unfinished. ::file-selector-button styles the
	274	button and KEEPS the filename — the hidden-input-and-label trick throws that away, and with no
	275	JavaScript nothing else can tell you which file you picked. */
	276	input[type=file]{font-size:13px;color:var(--dim);max-width:100%}
	277	input[type=file]::file-selector-button{font:inherit;padding:.35rem .8rem;margin-right:.6rem;
	278	border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);
	279	cursor:pointer}
	280	input[type=file]::file-selector-button:hover{border-color:var(--dim);background:var(--bg-soft)}
	281	.composer input[type=file]{max-width:14rem}
273	282	.composer input[type=file]::file-selector-button{font:inherit;border:1px solid var(--line);
274	283	background:transparent;color:var(--dim);border-radius:999px;padding:.25rem .7rem;margin-right:.5rem;
275	284	cursor:pointer}

package.json +1 -1

…	…	@@ -1,6 +1,6 @@
1	1	{
2	2	"name": "favela-surface",
3		"version": "0.0.44",
	3	"version": "0.0.45",
4	4	"description": "The favela renderer \u2014 server-side HTML over the daemon's socket. No storage, no keys, no swarm.",
5	5	"type": "module",
6	6	"main": "index.js",

test/nav.test.js +12 -0

…	…	@@ -55,3 +55,15 @@ test('★ the reaction palette is not pushed to the far edge', async (t) => {
55	55	const bar = css.slice(css.indexOf('.reactions{'), css.indexOf('.reactions form'))
56	56	t.ok(/justify-content:space-between/.test(bar), 'the row spreads its items instead')
57	57	})
	58
	59	test('⚠ the file control is styled like the rest of the page', async (t) => {
	60	const { timeline } = await import('../lib/pages.js')
	61	const html = timeline([], { empty: { follows: 0 } })
	62	const css = html.slice(html.indexOf('<style>'), html.indexOf('</style>'))
	63	// The native control renders a grey OS button and the words "No file chosen" — the only unstyled
	64	// element on the page, and the one that most made it look unfinished. ::file-selector-button
	65	// styles the button and KEEPS the filename, which a hidden-input-plus-label trick would throw
	66	// away: without JavaScript nothing else can tell you which file you picked.
	67	t.ok(css.includes('::file-selector-button'), 'the button part is styled')
	68	t.ok(/::file-selector-button\{[^}]*border-radius:999px/.test(css), 'like every other button here')
	69	})