fix(website): stop the hero mismatching its own prerendered markup

Reading prefers-reduced-motion in the state initialiser made the first
client render disagree with the server for anyone who has it on: the server
always serialises the searching state, the client painted the resting one,
and React bailed out of hydration with #418 on every load. The preference
now applies a tick later, from the opening-run effect, so the first render
matches the HTML and the resting state arrives immediately after.

The header's home link was 19px tall — the most reached-for control in the
nav, and the only one under the 24px target minimum, while every nav link
beside it was already 44. It gets a 44px box.

The demo's search field also carries an id, name and type, which clears the
"form field should have an id or name" issue and stops browsers offering
autofill on a fake terminal input.
This commit is contained in:
Michel de Graaf
2026-07-25 01:21:53 +02:00
parent 1eef464677
commit ba92e75fd3
7 changed files with 70 additions and 21 deletions
+6 -3
View File
@@ -112,7 +112,7 @@ export const Community = () => {
<>
<PageHead
eyebrow="community"
title="Help out, or go where you're better served."
title="Help out, or go where you’re better served."
>
It&rsquo;s mostly one person who&rsquo;s been on Soulseek since the early 2000s.
Issues and pull requests are welcome, and if another client fits you better, use it.
@@ -207,7 +207,7 @@ export const Community = () => {
title="Three good clients to point you elsewhere."
>
soulseek-rs has no GUI and no daemon mode yet. If one of these fits you better,
use it. Recommending them is the strongest trust signal there is.
use it.
</SectionHead>
<div className="grid grid-cols-1 gap-3.5">
{ALTERNATIVES.map((alt) => (
@@ -251,7 +251,10 @@ export const Community = () => {
</Button>
</div>
</div>
<Callout title="two things that stay true">
{/* Raised, not panel: this section is a band, which is itself
bg-panel — a panel-on-panel callout has only a 1.36:1 hairline
holding it together. */}
<Callout className="bg-raised" title="two things that stay true">
<p className="mb-1.5 !text-success">No telemetry. Ever.</p>
<p className="font-forum text-xs !text-muted">
Not affiliated with or endorsed by the Soulseek project.