yolo/arr
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): keep release deck aligned on phones

Browse Source 
Under 40rem the seven-column line cannot fit: hdr and audio move
into the expand row, the surviving five columns tighten, and the
column header never wraps at any width.

Closes #105

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Miguel Palhas
2026-08-23 08:43:04 +01:00
parent e36c73ca75
commit eed7094d1b
3 changed files with 100 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.impeccable/design.json
+58 -9
View File
@@ -23,49 +23,89 @@
"role": "secondary",
"displayName": "Signal Green",
"canonical": "oklch(0.8 0.17 150)",
"tonalRamp": ["oklch(0.45 0.1 150)", "oklch(0.62 0.14 150)", "oklch(0.8 0.17 150)", "oklch(0.88 0.12 150)"]
"tonalRamp": [
"oklch(0.45 0.1 150)",
"oklch(0.62 0.14 150)",
"oklch(0.8 0.17 150)",
"oklch(0.88 0.12 150)"
]
},
"signal-warn": {
"role": "tertiary",
"displayName": "Caution Amber",
"canonical": "oklch(0.82 0.14 80)",
"tonalRamp": ["oklch(0.5 0.1 80)", "oklch(0.66 0.13 80)", "oklch(0.82 0.14 80)", "oklch(0.9 0.1 80)"]
"tonalRamp": [
"oklch(0.5 0.1 80)",
"oklch(0.66 0.13 80)",
"oklch(0.82 0.14 80)",
"oklch(0.9 0.1 80)"
]
},
"signal-fault": {
"role": "secondary",
"displayName": "Fault Red",
"canonical": "oklch(0.68 0.21 25)",
"tonalRamp": ["oklch(0.42 0.15 25)", "oklch(0.55 0.19 25)", "oklch(0.68 0.21 25)", "oklch(0.8 0.14 25)"]
"tonalRamp": [
"oklch(0.42 0.15 25)",
"oklch(0.55 0.19 25)",
"oklch(0.68 0.21 25)",
"oklch(0.8 0.14 25)"
]
},
"accent": {
"role": "primary",
"displayName": "Phosphor Cyan",
"canonical": "oklch(0.8 0.12 220)",
"tonalRamp": ["oklch(0.5 0.1 220)", "oklch(0.65 0.11 220)", "oklch(0.8 0.12 220)", "oklch(0.9 0.08 220)"]
"tonalRamp": [
"oklch(0.5 0.1 220)",
"oklch(0.65 0.11 220)",
"oklch(0.8 0.12 220)",
"oklch(0.9 0.08 220)"
]
},
"verdict-eligible": {
"role": "secondary",
"displayName": "Eligible Green",
"canonical": "oklch(0.8 0.17 150)",
"tonalRamp": ["oklch(0.45 0.1 150)", "oklch(0.62 0.14 150)", "oklch(0.8 0.17 150)", "oklch(0.88 0.12 150)"]
"tonalRamp": [
"oklch(0.45 0.1 150)",
"oklch(0.62 0.14 150)",
"oklch(0.8 0.17 150)",
"oklch(0.88 0.12 150)"
]
},
"verdict-waived": {
"role": "tertiary",
"displayName": "Waiver Amber",
"canonical": "oklch(0.82 0.14 80)",
"tonalRamp": ["oklch(0.5 0.1 80)", "oklch(0.66 0.13 80)", "oklch(0.82 0.14 80)", "oklch(0.9 0.1 80)"]
"tonalRamp": [
"oklch(0.5 0.1 80)",
"oklch(0.66 0.13 80)",
"oklch(0.82 0.14 80)",
"oklch(0.9 0.1 80)"
]
},
"verdict-rejected": {
"role": "neutral",
"displayName": "Rejected Slate",
"canonical": "oklch(0.68 0.02 250)",
"tonalRamp": ["oklch(0.42 0.02 250)", "oklch(0.55 0.02 250)", "oklch(0.68 0.02 250)", "oklch(0.8 0.015 250)"]
"tonalRamp": [
"oklch(0.42 0.02 250)",
"oklch(0.55 0.02 250)",
"oklch(0.68 0.02 250)",
"oklch(0.8 0.015 250)"
]
},
"status-channel": {
"role": "tertiary",
"displayName": "Channel Violet",
"canonical": "oklch(0.78 0.14 305)",
"tonalRamp": ["oklch(0.64 0.045 305)", "oklch(0.72 0.09 305)", "oklch(0.78 0.14 305)", "oklch(0.86 0.09 305)"]
"tonalRamp": [
"oklch(0.64 0.045 305)",
"oklch(0.72 0.09 305)",
"oklch(0.78 0.14 305)",
"oklch(0.86 0.09 305)"
]
}
},
"typographyMeta": {
@@ -115,7 +155,16 @@
"purpose": "The one authored moment: the board lights in signal order on first verdict. Guarded by prefers-reduced-motion."
}
],
"breakpoints": [{ "name": "stack", "value": "46rem — the chain turns vertical, one junctioned trace" }],
"breakpoints": [
{
"name": "stack",
"value": "46rem — the chain turns vertical, one junctioned trace"
},
{
"name": "deck-narrow",
"value": "40rem — the release deck sheds hdr and audio columns (expand row carries them) and tightens the surviving five; headers never wrap"
}
],
"themes": {
"strategy": "committed dark only — a control room is lit by its lamps; the operator uses this on a homelab desk at night. color-scheme: dark is declared in the shell.",
"dark": {
web/src/main.ts
+3
View File
@@ -1171,9 +1171,12 @@ function releaseRow(
const meta = document.createElement("p");
meta.className = "rel-meta readout dim";
const published = formatPublishDate(release.publish_date);
// hdr and audio leave the chip line under 40rem; the expand carries them
meta.textContent = [
`indexer ${release.indexer_id}`,
published === null ? null : `published ${published}`,
`hdr ${formatHdr(release.parsed)}`,
`audio ${formatAudio(release.parsed)}`,
`${release.size} bytes`,
]
.filter((part) => part !== null)
web/src/style.css
+39 -1
View File
@@ -897,9 +897,10 @@ body {
text-align: right;
}
/* §9.3: headers never wrap — the narrow-deck block below sheds columns
instead */
.colhead {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-2) var(--space-1) 0;
}
@@ -1161,3 +1162,40 @@ body {
height: 0.5rem;
}
}
/* ---- narrow deck (§9.3 at phone widths) ------------------------------- */
/* the full seven-column line is 36rem; under 40rem it cannot fit, so hdr
and audio leave the line (the expand row carries them) and the five
surviving columns tighten — aligned, never wrapped, never scrolled */
@media (max-width: 40rem) {
.colhead .cw,
.rel-line .chip {
padding: 0 var(--space-1);
}
.cw-hdr,
.cw-aud {
display: none;
}
.cw-score {
width: 3rem;
}
.cw-res {
width: 3rem;
}
.cw-src {
width: 3.5rem;
}
.cw-size {
width: 3rem;
}
.cw-seed {
width: 2.5rem;
}
}