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

Unify control and chip geometry at 2rem #164

New Issue
Closed
opened 2026-08-24 11:23:47 +01:00 by naps62-yolo · 1 comment
naps62-yolo commented 2026-08-24 11:23:47 +01:00
Owner
Copy Link
Copy Source

Buttons and chips sit next to each other constantly — season rows, episode
rows, release rows, the title-detail action bar — and they are wildly different
sizes. .control is min-height: 2.75rem at --text-sm uppercase; .chip is
min-height: 1.375rem at --text-xs. A season line reads as two unrelated
systems stacked on one row.

Separately, .control sets a min-height but never centres its content. A
<button> gets vertical centring from the user agent, but .movie-actions a.control — the TMDB / TVDB / Rotten Tomatoes links — is an anchor, so its
text sits at the top of the box. Visible on the deployed series page.

What to change

One control height across the app: 2rem, chips included, with a single text
size shared by both. Chips keep their own colour, border and border-radius
treatment; only the geometry converges.

Give .control display: inline-flex with centred alignment on both axes, so
anchors centre the way buttons already do.

Work through .impeccable/design.json where the sizes are tokens, rather than
writing literals into style.css.

Watch for

The release deck is the dense case: several chips per row across many rows.
2rem chips there could break the fixed-width, no-horizontal-scroll requirement
in §9.3. Check it in the browser before calling this done. If the deck
genuinely cannot take it, say so on this issue rather than quietly exempting it.

The mobile breakpoints at max-width: 46rem and max-width: 40rem re-lay
episode rows and need re-checking at the new size.

Done looks like

  • Chips and buttons share one height and one text size.
  • Anchor text is vertically centred in the title-detail action bar.
  • Season rows, episode rows, release rows, the action bar and the header nav
    all verified in the browser at desktop and at both mobile breakpoints.

Non-goals

  • No colour changes. A separate issue in this milestone owns chip colour and
    depends on this one.
  • Do not change what any control does, only how it is sized.

Depends on: #159

Buttons and chips sit next to each other constantly — season rows, episode rows, release rows, the title-detail action bar — and they are wildly different sizes. `.control` is `min-height: 2.75rem` at `--text-sm` uppercase; `.chip` is `min-height: 1.375rem` at `--text-xs`. A season line reads as two unrelated systems stacked on one row. Separately, `.control` sets a `min-height` but never centres its content. A `<button>` gets vertical centring from the user agent, but `.movie-actions a.control` — the TMDB / TVDB / Rotten Tomatoes links — is an anchor, so its text sits at the top of the box. Visible on the deployed series page. ## What to change One control height across the app: **2rem**, chips included, with a single text size shared by both. Chips keep their own colour, border and border-radius treatment; only the geometry converges. Give `.control` `display: inline-flex` with centred alignment on both axes, so anchors centre the way buttons already do. Work through `.impeccable/design.json` where the sizes are tokens, rather than writing literals into `style.css`. ## Watch for The release deck is the dense case: several chips per row across many rows. 2rem chips there could break the fixed-width, no-horizontal-scroll requirement in §9.3. Check it in the browser before calling this done. If the deck genuinely cannot take it, say so on this issue rather than quietly exempting it. The mobile breakpoints at `max-width: 46rem` and `max-width: 40rem` re-lay episode rows and need re-checking at the new size. ## Done looks like - Chips and buttons share one height and one text size. - Anchor text is vertically centred in the title-detail action bar. - Season rows, episode rows, release rows, the action bar and the header nav all verified in the browser at desktop and at both mobile breakpoints. ## Non-goals - No colour changes. A separate issue in this milestone owns chip colour and depends on this one. - Do not change what any control does, only how it is sized. --- Depends on: #159
naps62-yolo added this to the Feedback pass milestone 2026-08-24 11:23:47 +01:00
naps62-yolo added the phase/5-uidifficulty/moderatetype/chorearea/web labels 2026-08-24 11:23:47 +01:00
naps62-yolo added a new dependency 2026-08-24 11:23:53 +01:00
#159 Amend DESIGN.md for the feedback pass
naps62-yolo added a new dependency 2026-08-24 11:23:53 +01:00
#165 Colour-code state chips
naps62-yolo commented 2026-08-24 12:12:00 +01:00
Author
Owner
Copy Link
Copy Source

Out-of-scope findings from #164, not fixed on the branch:

  1. The 2rem (32px) control height conflicts with the "keep every control ≥44px" line in the design-system dos. The issue explicitly chose 2rem; the dos line should be updated or the tension acknowledged when #165 lands.
  2. Between 40rem and 46rem the decks seventh column (seed) wraps to a second line inside the row. Pre-existing: the .cw column widths are fixed rem and untouched by this change (the narrower grab control actually buys a few px back). Not a horizontal scroll, so §9.3 holds, but the "full seven-column line is 36rem" comment in style.css doesnt hold once the grab control shares the row.
  3. Settings form inputs (.form-input) stay at 2.25rem — inputs werent in this issues buttons-and-chips scope, so they now sit a step taller than the buttons next to them in .settings-row-actions.
Out-of-scope findings from #164, not fixed on the branch: 1. The 2rem (32px) control height conflicts with the "keep every control ≥44px" line in the design-system dos. The issue explicitly chose 2rem; the dos line should be updated or the tension acknowledged when #165 lands. 2. Between 40rem and 46rem the decks seventh column (seed) wraps to a second line inside the row. Pre-existing: the `.cw` column widths are fixed rem and untouched by this change (the narrower grab control actually buys a few px back). Not a horizontal scroll, so §9.3 holds, but the "full seven-column line is 36rem" comment in style.css doesnt hold once the grab control shares the row. 3. Settings form inputs (`.form-input`) stay at 2.25rem — inputs werent in this issues buttons-and-chips scope, so they now sit a step taller than the buttons next to them in `.settings-row-actions`.
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/moderate phase/5-ui type/chore
Milestone
No items
No Milestone Feedback pass
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.
Blocks
#165 Colour-code state chips
yolo/arr
Depends on
#159 Amend DESIGN.md for the feedback pass
yolo/arr
Reference: yolo/arr#164