From c5a503f5b5dec3e9ca5515cbc71e556186ceb880 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 6 Feb 2026 13:15:24 +0000
Subject: [PATCH] fix(my-pokedexes): preserve original desktop header and stack
 actions on mobile

---
 src/routes/my-pokedexes/+page.svelte | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/routes/my-pokedexes/+page.svelte b/src/routes/my-pokedexes/+page.svelte
index eb5a762..6b624bb 100644
--- a/src/routes/my-pokedexes/+page.svelte
+++ b/src/routes/my-pokedexes/+page.svelte
@@ -165,9 +165,9 @@
 </svelte:head>
 
 <div class="container mx-auto p-4">
-	<div class="flex justify-between items-center mb-6">
+	<div class="flex justify-between items-center mb-6 my-pokedexes-header">
 		<h1 class="text-3xl font-bold">My Pokédexes</h1>
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-2 my-pokedexes-actions">
 			<a class="btn btn-outline" href="/backup-settings">Backup Settings</a>
 			<button class="btn btn-primary" on:click={openCreateModal}> Create New Pokédex </button>
 		</div>
@@ -212,3 +212,23 @@
 		></button>
 	</div>
 {/if}
+
+<style>
+	@media (max-width: 767px) {
+		.my-pokedexes-header {
+			align-items: stretch;
+			flex-direction: column;
+			gap: 0.75rem;
+		}
+
+		.my-pokedexes-actions {
+			flex-direction: column;
+			gap: 0.5rem;
+			width: 100%;
+		}
+
+		.my-pokedexes-actions :global(.btn) {
+			width: 100%;
+		}
+	}
+</style>