Skip to content

Deck shape panel: layout at extreme counts #320

Closed

Description

@plainprogrammer

Outcome. The deck shape panel (DeckShape) stays tidy at the extreme counts a large deck or collection can reach, on a phone and on a desktop.

Spec 069 (#256) built the panel on spec 060's CSS and found four layout limits that show only at extreme counts. They are documented in docs/design-system/components/DeckShape.md and in docs/specs/069-deck-shape-panel/verification.md (Findings):

  • The curve's 6+ column: in a 360px browser frame (not on a real 360px phone, which is 15px wider inside: see the 2026-11-11 phone-width lesson and Narrow-frame helper misses overflow hidden by a scrollbar's width #318), a four-digit count ("1,357") overflows its column by about 1.85px.
  • The mana bar's labels crowd when all five colour segments carry four-digit counts.
  • A type row's count goes out of line when its proxy suffix is wider than 4.5rem.
  • The caption can wrap with a leading "· " at the start of its second line.

Decide per item whether to fix it (abbreviate large counts, let the curve's labels shrink or wrap, widen the suffix column, use a separator that doesn't lead a line) or accept it as a documented limit. Changes go in additions.css under the DeckShape heading, with design-system tokens only, plus DeckShape.md. Examples use spec 069's worst-case fixtures at 375px (a 360px phone), 640px and 1280px in both themes, with screenshots before and after.


A follow-up from spec 069's implementation review (#256, 2026-11-11), filed by the maintainer's ruling. It is refined into a spec when its turn comes, and checked then against the north star's rules.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

design-systemDesign system rules, components and previews (docs/design-system, collector/additions.css)theme: locationsRoadmap theme C

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions