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

Fix deck column chips sitting top-aligned in their box #170

New Issue
Closed
opened 2026-08-24 16:12:04 +01:00 by naps62-yolo · 0 comments
naps62-yolo commented 2026-08-24 16:12:04 +01:00
Owner
Copy Link
Copy Source

Every chip in a release deck row sits with its text pinned to the top of the chip
box instead of centred in it. Regression from #164.

.chip sets display: inline-flex; align-items: center and, since #164,
min-height: var(--control-h) (2rem). The column cells then add:

.cw {
  display: inline-block;
  ...
  line-height: 1.25rem;
}

display: inline-block cancels the flex formatting context, so align-items no
longer applies. The box is still 2rem tall but the line is 1.25rem, and all
0.75rem of the slack collects below the text.

Restore a flex box on .cw so the base rule's vertical centring applies again,
and keep the cells' fixed widths, ellipsis truncation and no-wrap behaviour
exactly as they are.

text-align: right on .cw-score, .cw-size and .cw-seed also stops working
once the cell is a flex container — text alignment does not position flex items.
Those three columns must stay right-aligned so digits line up down the column;
use justify-content: flex-end. The other four columns stay left-aligned.

Scope: web/src/style.css only, and .impeccable/design.json if the CSS mirror
in it covers these rules. Do not touch main.ts — no markup change is needed.
Verify at both desktop width and under the 40rem narrow-deck breakpoint, which
re-pads these same cells.

Every chip in a release deck row sits with its text pinned to the top of the chip box instead of centred in it. Regression from #164. `.chip` sets `display: inline-flex; align-items: center` and, since #164, `min-height: var(--control-h)` (2rem). The column cells then add: ```css .cw { display: inline-block; ... line-height: 1.25rem; } ``` `display: inline-block` cancels the flex formatting context, so `align-items` no longer applies. The box is still 2rem tall but the line is 1.25rem, and all 0.75rem of the slack collects below the text. Restore a flex box on `.cw` so the base rule's vertical centring applies again, and keep the cells' fixed widths, ellipsis truncation and no-wrap behaviour exactly as they are. `text-align: right` on `.cw-score`, `.cw-size` and `.cw-seed` also stops working once the cell is a flex container — text alignment does not position flex items. Those three columns must stay right-aligned so digits line up down the column; use `justify-content: flex-end`. The other four columns stay left-aligned. Scope: `web/src/style.css` only, and `.impeccable/design.json` if the CSS mirror in it covers these rules. Do not touch `main.ts` — no markup change is needed. Verify at both desktop width and under the 40rem narrow-deck breakpoint, which re-pads these same cells.
naps62-yolo added this to the Removal and navigation milestone 2026-08-24 16:12:04 +01:00
naps62-yolo added the phase/5-uidifficulty/trivialarea/webtype/bug labels 2026-08-24 16:12:04 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
arr-api
 area/ci
CI and test harness
 area/compat
arr-compat
 area/core
arr-core
 area/daemon
arr-daemon
 area/db
arr-db
 area/dl
arr-dl
 area/indexer
arr-indexer
 area/infra
workspace and tooling
 area/meta
arr-meta
 area/parse
arr-parse
 area/probe
arr-probe
 area/subs
arr-subs crate: providers, extraction, translation, sync
 area/web
web/
 difficulty/easy
bounded, obvious approach, few files
 difficulty/hard
subtle correctness or cross-cutting
 difficulty/moderate
multiple files, judgement, an interface to design
 difficulty/trivial
one file, mechanical, no design decisions
 phase/1-skeleton
workspace, CI, config, database, empty API and SPA
 phase/2-logic
parsing and policy engine, pure, no network
 phase/3-sourcing
TMDB and Prowlarr, read-only
 phase/4-movies
movies end to end
 phase/5-ui
search, buckets, library views, queues
 phase/6-tv
seasons, episodes, tracking, derived status
 phase/7-people
owner tags and notifications
 phase/8-compat
Jellyseerr shim
 phase/9-subtitles
build order: subtitles, DESIGN.md §15
 type/bug
type/chore
type/feature
type/test
No labels area/web difficulty/trivial phase/5-ui type/bug
Milestone
No items
No Milestone Removal and navigation
Projects
Clear projects
No projects
Assignees
Clear assignees
hermes (Hermes (agent)) naps62 (Miguel Palhas) naps62-yolo (naps62-yolo (agent))
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: yolo/arr#170