From ad8c8a847d07b9a636ca03ffec6b44ed89b9a78c Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:35:14 +0000
Subject: [PATCH] feat(#48): Make box cells square on mobile

---
 .../pokedex/PokedexViewBoxes.svelte           | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

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}
 														/>
-														<span class="md:hidden">&#9432;</span>
 													</div>
 												</div>
 												<div slot="tooltip">
@@ -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;