Responsive card sizing and improved symbol legibility - #44
Open
TimBest wants to merge 1 commit into
Open
Conversation
Two layers of whitespace were shrinking every symbol: a 20px margin on the card's svg (40px of a ~99px card) and a 5-unit gap around each symbol box. Combined with a `max-height: 10vh` cap, a shape reached the player at ~17px on a phone. Drop `SYMBOL_MARGIN` to 2 (symbol box 35 -> 38 units), replace the svg margin with 3px of card padding, and size the card at `min(26vw, 20vh)` so it fills the board's three columns instead of being capped by viewport height. Shapes now land at ~27px on a 330px-wide phone and ~57px on desktop. Symbol size stays independent of shape count — `SYMBOL_SIZE` remains a single constant and the count only selects which of the nine fixed slots are filled, so one shape renders at exactly the size of each of nine. Verified in Chromium at 320/330/360px and 1440px: identical symbol boxes at every count, no horizontal overflow. The card sizing rule has to be a child selector. `CardSvg` nests one <svg> per symbol inside the root one, and a `.card svg` descendant selector applied the width to those too — in user units, swelling each symbol to fill the card. The old rule got away with it because `max-height: 10vh` exceeded the symbol box. Also scope the two overrides that sized by height (the history strip and the editor's four-column selector, which sits in a 500px modal), and refresh the scale figures in the deckBuilder README and shape skill docs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jt2TMy1ThEaBQPsfSN8cP3
✅ Deploy Preview for imaginative-dieffenbachia-3400e7 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
2 participants
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.
Summary
Refactored card sizing from a fixed
max-height: 10vhconstraint to a responsivemin(26vw, 20vh)approach that scales cards appropriately across device sizes. This improves symbol legibility on phones (the primary constraint) while allowing cards to grow on larger screens. Also adjusted symbol box sizing and spacing throughout the UI for better visual consistency.Key Changes
Card sizing: Changed from
max-height: 10vhtowidth: min(26vw, 20vh)withheight: auto, allowing cards to scale responsively while maintaining square aspect ratio. This results in ~86px cards on narrow phones (27px symbols) and ~180px on desktop (57px symbols).Symbol box: Reduced
SYMBOL_MARGINfrom 5 to 2 units, increasingSYMBOL_SIZEfrom 35 to 38 units. This improves symbol visibility at small sizes (0.317x downscale vs 0.29x previously).CSS selector specificity: Changed
.card svgto.card-content > svgto avoid unintentionally resizing nested symbol SVGs within the card viewport.Spacing adjustments:
m-1tom-0and added 4px gap to board gridImage sizing: Updated
.card imgto usemax-widthandmax-heightwith the same responsive sizing formula.Card selector: Added responsive sizing for cards in the game editor's card selector using
min(18vw, 8vh).Documentation: Updated all references to card sizing in iconography guide, architecture docs, and deckBuilder README to reflect new measurements and the phone-first design approach.
Test utilities: Updated
render-shape.mjsreference sizes from [60, 90, 140] to [90, 130, 180] to match actual responsive card sizes.Implementation Details
The responsive sizing uses CSS
min()to ensure cards never exceed viewport constraints while filling available space on narrow devices. The phone card (90px) is now the explicit reference point for symbol legibility checks, as it represents the worst-case scenario. TheSYMBOL_SIZEconstant is now exported fromCardSvg.tsxfor use in test utilities.https://claude.ai/code/session_01Jt2TMy1ThEaBQPsfSN8cP3