[plainprogrammer]

Closes #330

What changes

On the deck shape panel's mana bar, a segment drew its label ("U 44", "W 2.6k") from 10% of the symbols, but a label needs 13–19% of a 238px bar at a 320px viewport (a label wraps at its own space, "W" over "12", and is cut off). Now a label is drawn on one line inside its segment or it isn't drawn, at any width of the bar and for any label length. The caption and the bar's aria-label keep every colour's exact count.

The fix is CSS only, in the DeckShape mana bar block of additions.css (12 insertions, 2 deletions; no markup, Ruby or JavaScript change, no new class): each .c-manabar__seg is a wrapping flex container with overflow:clip, a zero-width ::before as high as the segment is its first item, and the label doesn't shrink. The browser's own line breaking keeps the label on the first line only if it fits the segment's content width; otherwise it moves to a second line below the segment, where overflow:clip hides it. No font numbers anywhere. The 10% narrow class stays (spec 060 decision 4).

The approach was the maintainer's ruling (D1, 2026-11-12), chosen from the issue's options A/B/C plus this one, after a probe measured it in headless Firefox: spec 078 decision 1.

Supersedes (in part)

Spec 077 decision 2's "documented limit" for this band (its Goal 1 qualification, Open Questions, Error Scenarios row, AC-5.1, AC-5.3 and the 060 AC-2.4 exception), recorded both ways in spec 078 and docs/specs/README.md. Specs 060 decision 4 and 069 decision 9 (the 10% rule) are kept. DeckShape.md and the collection-and-lots.md area doc are updated.

Owed to the maintainer: a phone check on WebKit (AC-2.4)

The suite runs the rule in headless Firefox only. It relies on flex line breaking and a percentage height in a stretched flex item (Safari 17.2 / Chrome 120 / Firefox 121 are the allow_browser :modern floor and all have both). Please open a deck whose white is about 12% of its coloured symbols (a four-character label, "W 12") on a phone in Safari at 320px or 360px and confirm no label wraps or is cut off, a label that fits is drawn and one that doesn't is not. verification.md lists it as "not yet done".

Tests

• Red first (da6dbb2f, 8 examples on the unchanged CSS: 5 red, 3 green, as the plan traced), then green (acf50959): the nested describe "mana label fit (spec 078, #330)" in spec/system/deck_shape_panel_spec.rb (headless Firefox): the three band decks (labels of four, five and six characters) at a 320, 345 and 360px viewport, a 366px and a 640px frame and the 1280px aside, both themes; a non-vacuity example; "fits so is drawn" at 360px and in the aside; the spec 077 fixture guard; two failing variants (old layout: "W 12" on two lines; no first item: a label off centre). The fit test compares the fractional content width with a 0.5px band (a label is 43.56px on a Mac and about 44.70px on the Linux runner).
• After every task: deck shape specs (system, request, model), design_system_deck_components, design_system_files, deck_core and query_counts: 181 examples, 0 failures. The full bin/ci ran through the pre-push hook on e8042b37 and passed; GitHub's run follows.
• Reviews (Opus, read-only): spec, 2 rounds (REVISE twice, all findings taken: the integer clientWidth fit test would have failed Linux, overflow:clip instead of hidden, an incomplete supersession table); plan, 1 round (REVISE, taken); implementation review (Mode B) SPEC-ALIGNED WITH FINDINGS (3 minor, 2 nits, none blocking), recorded in verification.md.

Screenshots (factory data, placeholder printings)

"Before" is the old layout restored by a <style>, not built from main. Two band decks: four (W 12, U 13, B 15, R 16, G 44; "W 12" is 11.7% of the bar) and six (W 1,200, U 1,800, B 2,000, R 2,100, G 3,900; "W 1.2k" and "U 1.8k"). At 320px the narrow labels wrap and are cut off before and are absent after; at 360px and in the aside "W 12" fits and is drawn. (On Linux, "R 2.1k" at 320px, 44.30px of content for a 44.70px label, would be clipped; the Mac shots draw it.)

Four-character labels

Width	Before (light)	After (light)	Before (dark)	After (dark)
320px
360px
Desktop aside

Six-character labels

Width	Before (light)	After (light)	Before (dark)	After (dark)
320px
360px
Desktop aside

Notes

• No migration, no schema change, the export unchanged; no hosted-door cost (a stylesheet rule).
• The #318 worker's changes to spec/support/narrow_frame.rb and spec 077's AC-5.1 examples are not touched here; my new examples live in their own nested describe and use documentElement.clientWidth, never innerWidth.
• After the merge, distill-feature retires plan.md (the index row reads "retirement owed").

🤖 Generated with Claude Code