ddidderr/lanspread
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

docs(design): trim peer count chip to icon + bare number

Browse Source 
The download progress "peers" chip previously rendered as
`[icon] from N peers` — a full mini-sentence sitting between the speed
and ETA stats. With four groups already separated by middots, the extra
preposition and unit made the row read as prose rather than a stat
strip, and the singular/plural switch added a second source of layout
jitter on top of the digit-width change.

Update the design reference (README, components.jsx, styles.css) so the
chip shows just the users glyph and the count, matching the visual
weight of the other stat groups. The full sentence
("Downloading from N peers on the LAN") moves to the `title` tooltip,
which keeps the affordance discoverable without spending row width on
it. The count adopts `var(--t-1)` + 600 + tabular-nums directly on
`.dl-peers` (no inner `<strong>` needed), so the chip is a single span.

Also tighten the container-query breakpoints. Removing the prose makes
the chip much narrower, so the previous 300px cutoff for hiding peers
and 380px cutoff for hiding ETA were over-eager — both stats now fit
comfortably in narrower modals. Drop them to 240px (peers) and 320px
(ETA). The pct/cancel column still never collapses.

Test Plan
- Visual review of the design reference HTML at component widths
  240px / 320px / 380px to confirm peers and ETA drop at the new
  thresholds rather than the old ones.
- Confirm the chip's tooltip still spells out the full sentence.
This commit is contained in:
ddidderr
2026-05-21 00:40:54 +02:00
parent 8acb6dc246
commit b96e8c5747
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/design_reference/styles.css
+5 -5
View File
@@ -785,21 +785,21 @@
.dl-lg-secondary .dl-bytes .dl-of { color: var(--t-2); font-weight: 500; }
.dl-lg-secondary .dl-speed { color: var(--t-1); font-weight: 600; white-space: nowrap; }
.dl-lg-secondary .dl-peers {
display: inline-flex; align-items: center; gap: 5px;
color: var(--t-2); white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
color: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dl-lg-secondary .dl-peers strong { color: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-lg-secondary .dl-peers svg { opacity: 0.7; }
.dl-lg-secondary .dl-eta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dl-sep { opacity: 0.45; }
/* Gracefully drop the ETA when the modal is narrow */
@container (max-width: 380px) {
@container (max-width: 320px) {
.dl-lg-secondary .dl-eta,
.dl-lg-secondary .dl-sep-eta { display: none; }
}
/* Even narrower: drop peers too, keep size + speed */
@container (max-width: 300px) {
@container (max-width: 240px) {
.dl-lg-secondary .dl-peers,
.dl-lg-secondary .dl-sep-peers { display: none; }
}