feat(ui): align peer count chip with design reference

Mirror the design-doc update in the actual download progress component
so the GUI matches the trimmed chip. Previously the large progress
panel rendered `[icon] from N peer(s)` inline; now it renders just
`[icon] N`, with the full "Downloading from N peers on the LAN"
sentence retained as the `title` tooltip for discoverability.

Changes:
- `DownloadProgress.tsx` (lg variant): drop the "from" / unit text from
  the inline span, keeping only the count. `peerUnit` stays in scope
  because the tooltip still needs singular/plural.
- `launcher.css`: collapse `.dl-peers` and `.dl-peers strong` into a
  single rule that puts the t-1 colour, 600 weight and tabular-nums
  directly on the chip (the inner `<strong>` no longer exists). Gap
  drops from 5px to 4px to match the tighter icon+number layout.
- Container queries: peers drops at <=240px and ETA drops at <=320px,
  matching the new thresholds in the design reference. The narrower
  chip simply fits in smaller modals, so the old 300/380 cutoffs were
  hiding stats that would have rendered fine.

Test Plan
- `just frontend-test` (passes)
- `just run`, start a download, confirm the chip reads `[icon] N`,
  hover shows the tooltip, and narrowing the window collapses ETA
  before peers at the new breakpoints.
This commit is contained in:
2026-05-21 00:41:10 +02:00
parent b96e8c5747
commit 12a0d7abe9
2 changed files with 5 additions and 10 deletions
@@ -86,9 +86,7 @@ export const DownloadProgress = ({ game, size = 'md', full = false, onCancel }:
title={`Downloading from ${stats.activePeerCount} ${peerUnit} on the LAN`}
>
<Icon.users />
<span>
from <strong>{stats.activePeerCount}</strong> {peerUnit}
</span>
<span>{stats.activePeerCount}</span>
</span>
</>
)}