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;