diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte index 428e268..8be9bf3 100644 --- a/src/lib/components/pokedex/PokedexViewBoxes.svelte +++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte @@ -533,7 +533,6 @@ form={pokedexEntry.form} shiny={showShiny} /> -
@@ -632,6 +631,13 @@ border: 1px solid #ddd; padding: 0; border-radius: 0; + /* + On small screens the grid columns get narrow; without an explicit ratio, + the button height becomes content-driven (padding + sprite) and you end up + with rectangular cells. Force each slot to be square. + */ + aspect-ratio: 1 / 1; + width: 100%; } .pokemon-box--filtered-out { @@ -658,15 +664,53 @@ .pokemon-box :global(img) { width: var(--sprite-size, 64px); height: var(--sprite-size, 64px); + max-width: 100%; + max-height: 100%; + display: block; object-fit: contain; } .sprite-placeholder { width: var(--sprite-size, 64px); height: var(--sprite-size, 64px); + max-width: 100%; + max-height: 100%; display: block; } + /* Mobile: keep 6 columns but prevent sprite/padding from forcing tall cells */ + @media (max-width: 767px) { + .pokemon-box-inner { + /* cap padding so the sprite can fit inside small squares */ + padding: min(var(--cell-padding, 1rem), 0.35rem); + } + + .pokemon-box :global(img) { + /* allow the sprite to shrink with the square cell */ + width: min(var(--sprite-size, 64px), 100%); + height: min(var(--sprite-size, 64px), 100%); + } + + .sprite-placeholder { + width: min(var(--sprite-size, 64px), 100%); + height: min(var(--sprite-size, 64px), 100%); + } + + .status-badge { + width: 0.95rem; + height: 0.95rem; + } + + .status-badge-top { + top: 0.35rem; + } + + .status-icon { + width: 0.85rem; + height: 0.85rem; + } + } + .status-badge { display: inline-flex; align-items: center;