greyson/super-auto-pets-board-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix card text overflow on taller cards

Browse Source 
Shrink the oversized emoji art and let the effect text grow into the
freed middle band, centered with safe fallback to top-aligned so long
effects never clip their leading words.
This commit is contained in:
Greyson Parrelli
2026-07-23 01:00:37 -04:00
parent b8775432b4
commit da00d0fcd7
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+18 -6
View File
@@ -436,13 +436,14 @@ h3 {
} }
.card-art { .card-art {
font-size: 2.4rem; font-size: 1.8rem;
line-height: 1.2; line-height: 1;
flex: 0 0 auto;
filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
} }
.card-lg .card-art { .card-lg .card-art {
font-size: 3rem; font-size: 2.5rem;
} }
.card-sm .card-art { .card-sm .card-art {
@@ -452,16 +453,27 @@ h3 {
.card-name { .card-name {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.1;
margin-top: 1px; margin-top: 1px;
flex: 0 0 auto;
} }
.card-effect { .card-effect {
font-size: 0.56rem; font-size: 0.53rem;
line-height: 1.25; line-height: 1.15;
font-weight: 700; font-weight: 700;
color: rgba(51, 35, 15, 0.75); color: rgba(51, 35, 15, 0.75);
text-align: center; text-align: center;
padding: 0 2px; padding: 1px 2px 0;
/* Grow into the space between the name and the power badge and center the
text there, so long effects use the whole middle band instead of being
clipped just under the name. */
flex: 1 1 auto;
display: flex;
/* Center short text in the band, but fall back to top-aligned when the text
is taller than the band, so the leading words are never the ones clipped. */
align-items: safe center;
justify-content: center;
overflow: hidden; overflow: hidden;
} }