fix(client): size mana cost pips to the printed cost, not a fixed px#6604
Merged
Conversation
The card-overlay mana pips were ~2.9x the size of the mana symbols printed on the card frame they sit on, and anchored above the title bar rather than inside it. On a desktop hand card a five-symbol cost spanned 67% of the card's width, reducing "Nissa, Ascended Animist" to "Nis". The badge stands in for the card's PRINTED mana cost (it renders the engine's effective cost, with a green ring when reduced), so calibrate its geometry against that cost. Measured on M15-frame art, a printed symbol is ~5.2% of the card's width, its right edge sits ~7% in and its top edge ~5.4% down. The fluid pip drops 15cqi -> 7cqi, which keeps a legibility margin over printed while fitting inside the title bar: a five-symbol cost now spans 32% instead of 67%. Fold the anchor into ManaCostPips as FLUID_ANCHOR. Diameter and anchor only look right together, and all five fluid consumers were repeating the placement by hand -- StackEntry had already drifted to a different value. CardPreview was the lone fixed-px consumer at 28px, which cannot be right for both a 300px hand hover and a 472px docked preview; give it the same @container basis so both land on the same ratio by construction, and drop the now-orphaned lg size.
matthewevans
enabled auto-merge
July 24, 2026 20:19
Contributor
📝 WalkthroughWalkthroughMana cost pip overlays now use fluid container-based sizing and centralized anchoring. Card previews, mobile hand views, player hand cards, zone fans, and stack entries remove fixed positional classes and rely on their surrounding overlay containers. ChangesResponsive mana pip overlays
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@client/src/components/mana/ManaCostPips.tsx`:
- Line 24: Update the fluid layout dimensions in ManaCostPips so five symbols
plus four gaps total the intended 32% container width, adjusting the 7cqi pip
size and/or 0.6cqi gap consistently. Preserve the overlap-free layout and
validate the resulting card-name spacing visually.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 1610eee7-e9df-4f2e-92b8-5daeda35f854
📒 Files selected for processing (6)
client/src/components/card/CardPreview.tsxclient/src/components/hand/MobileHandDrawer.tsxclient/src/components/hand/MobileHeldHandCard.tsxclient/src/components/hand/PlayerHand.tsxclient/src/components/mana/ManaCostPips.tsxclient/src/components/stack/StackEntry.tsx
The prior commit claimed a five-symbol cost spans 32% of the card's width, but 5 * 7cqi + 4 * 0.6cqi is 37.4cqi. The 32% came from measuring a fan-rotated hand card, where getBoundingClientRect returns an axis-aligned bounding box that inflates the frame and understates the row -- an invalid basis. Measured on an unrotated preview the row was 37.4%, exactly what the arithmetic predicts. Solve the three values for the stated target instead: 5 * 6cqi + 4 * 0.5cqi = 32cqi exactly. With 0.4cqi padding the symbol lands on 5.2cqi, which is precisely the printed symbol diameter, so the disk reads as a thin ring around a printed-size symbol rather than a badge sitting over one. Dropping the "legibility margin" costs nothing: the printed symbols on the same card are legible at 5.2%, which is what makes it enough. Verified in-app on an unrotated 300px preview -- symbol 5.2%, pip 6.0%, five-symbol row 32.0%. "Nissa, Ascended Animist" now reads to its last character where it was truncated to "Nissa, Ascended Anim" at 7cqi.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The card-overlay mana pips were ~2.9x the size of the mana symbols
printed on the card frame they sit on, and anchored above the title bar
rather than inside it. On a desktop hand card a five-symbol cost spanned
67% of the card's width, reducing "Nissa, Ascended Animist" to "Nis".
The badge stands in for the card's PRINTED mana cost (it renders the
engine's effective cost, with a green ring when reduced), so calibrate
its geometry against that cost. Measured on M15-frame art, a printed
symbol is ~5.2% of the card's width, its right edge sits ~7% in and its
top edge ~5.4% down. The fluid pip drops 15cqi -> 6cqi with 0.4cqi
padding, which sizes the symbol to exactly the printed 5.2% and leaves
the disk as a thin ring around it; the printed symbols on the same card
are legible at that size, which is what makes it enough. The three
values solve 5 * 6cqi + 4 * 0.5cqi = 32cqi, so the widest cost the frame
carries spans 32% instead of 67%.
Fold the anchor into ManaCostPips as FLUID_ANCHOR. Diameter and anchor
only look right together, and all five fluid consumers were repeating
the placement by hand -- StackEntry had already drifted to a different
value. CardPreview was the lone fixed-px consumer at 28px, which cannot
be right for both a 300px hand hover and a 472px docked preview; give it
the same @container basis so both land on the same ratio by
construction, and drop the now-orphaned lg size.
Verified in-app on an unrotated 300px preview: symbol 5.2%, pip 6.0%,
five-symbol row 32.0%. Measurements must come from an unrotated frame --
a fan-rotated hand card's getBoundingClientRect returns an axis-aligned
bounding box that inflates the frame and understates the row.
Summary by CodeRabbit