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

Give phone shop cards description room and un-clip the selection.

Browse Source 
The horizontal-scroll trays clip vertical overflow, so a selected card's lift,
gold outline, and check badge were cut off at the top. Add row headroom and
tuck the check badge inside the card corner. Also make the in-tray cards taller
with a larger rule panel and bigger ability text so descriptions aren't cramped
(widths stay tight so all four shop cards still fit without scrolling).
This commit is contained in:
Greyson Parrelli
2026-07-26 21:49:40 -04:00
parent 6e6374e751
commit 53a04b0cea
1 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+29 -9
View File
@@ -2945,14 +2945,14 @@ h3 {
/* --- cards: printed small --- */
.card {
width: 78px;
height: 108px;
width: 80px;
height: 126px;
padding: 4px;
gap: 3px;
}
.card-lg {
width: 82px;
height: 114px;
width: 80px;
height: 132px;
}
.card-sm {
width: 60px;
@@ -2975,10 +2975,10 @@ h3 {
font-size: 0.66rem;
}
.card-effect {
font-size: 0.48rem;
font-size: 0.55rem;
}
.card-lg .card-effect {
font-size: 0.5rem;
font-size: 0.57rem;
}
.card-art {
font-size: 1.7rem;
@@ -2986,11 +2986,29 @@ h3 {
.card-lg .card-art {
font-size: 1.85rem;
}
/* In-tray cards give more of their height to the rule panel so the ability
text has room to breathe (the magnified view keeps the roomy 58% scene). */
.shop-row .card-scene,
.deck-row .card-scene {
flex-basis: 49%;
}
/* A lift on tap would poke out of a sideways-scrolling strip and trip its
scrollbar; keep the feedback small on touch. */
.card.is-clickable:hover {
transform: translateY(-3px);
}
/* The trays scroll sideways, which clips vertical overflow — so the selected
card's lift, gold outline, and check badge would get cut off at the top.
Give the rows headroom and tuck the badge just inside the card corner. */
.card.is-selected {
transform: translateY(-3px);
}
.card-check {
top: -3px;
right: -3px;
width: 22px;
height: 22px;
}
/* --- shop: compact trays, one horizontal row each --- */
.shop {
@@ -3017,7 +3035,7 @@ h3 {
}
.shop-row-wrap,
.deck-wrap {
padding: 9px 10px 11px;
padding: 5px 6px 7px;
border-radius: 14px;
}
/* A full six-pet deck (or the shop row on a very narrow phone) scrolls
@@ -3027,10 +3045,12 @@ h3 {
.deck-row {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
/* Headroom for the selected card's lift + outline + check badge, which the
sideways scroll would otherwise clip. */
padding: 12px 6px 6px;
scrollbar-width: thin;
}
.shop-row {