Fix infinite stats submission and improve mobile button layout

- Fix infinite loop in stats submission effect by adding statsData to early return condition
- Make bottom buttons (View Stats, Sign In/Out) full-width on small screens
- Buttons now stack vertically on mobile, side-by-side on medium+ screens

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
George Powell
2026-02-10 21:05:10 -05:00
parent 482ee0a83a
commit 78440cfbc3

View File

@@ -267,7 +267,7 @@
statsData, statsData,
}); });
if (!browser || !isWon || !anonymousId) { if (!browser || !isWon || !anonymousId || statsData) {
console.log("Basic conditions not met"); console.log("Basic conditions not met");
return; return;
} }
@@ -507,20 +507,20 @@
<Credits /> <Credits />
{/if} {/if}
</div> </div>
<div class="mt-8 flex flex-col items-center gap-3"> <div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
<div class="flex gap-3"> <div class="flex flex-col md:flex-row gap-3">
<a <a
href="/stats?{user ? `userId=${user.id}` : `anonymousId=${anonymousId}`}" href="/stats?{user ? `userId=${user.id}` : `anonymousId=${anonymousId}`}"
class="inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md" class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
> >
📊 View Stats 📊 View Stats
</a> </a>
{#if user} {#if user}
<form method="POST" action="/auth/logout" use:enhance> <form method="POST" action="/auth/logout" use:enhance class="w-full md:w-auto">
<button <button
type="submit" type="submit"
class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md" class="inline-flex items-center justify-center w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium shadow-md"
> >
🚪 Sign Out 🚪 Sign Out
</button> </button>
@@ -528,7 +528,7 @@
{:else} {:else}
<button <button
onclick={() => authModalOpen = true} onclick={() => authModalOpen = true}
class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md" class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium shadow-md"
> >
🔐 Sign In 🔐 Sign In
</button> </button>