From 36f2e7e7c78cc8b61595ec656a53018eb12d08b4 Mon Sep 17 00:00:00 2001
From: claude <claude@adyrem.duckdns.org>
Date: Mon, 18 May 2026 12:11:05 +0200
Subject: [PATCH] Fix wheel animation and layout shift

---
 lib/mtg_wheel_web/live/wheel_live.ex | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/mtg_wheel_web/live/wheel_live.ex b/lib/mtg_wheel_web/live/wheel_live.ex
index e9c5270..f9631ba 100644
--- a/lib/mtg_wheel_web/live/wheel_live.ex
+++ b/lib/mtg_wheel_web/live/wheel_live.ex
@@ -54,10 +54,10 @@ defmodule MtgWheelWeb.WheelLive do
       <div class={["mt-2 rounded-2xl bg-gray-800 border border-purple-700 p-6 w-full max-w-lg text-center shadow-xl", (@result == nil || @spinning) && "invisible"]}>
         <h2 class="text-lg font-semibold text-purple-300 mb-3">Your Deck</h2>
         <div class="grid grid-cols-2 gap-3 text-sm">
-          <.stat label="Budget" value={@result && @result.budget} />
-          <.stat label="Archetype" value={@result && @result.archetype} />
-          <.stat label="Subtheme" value={@result && @result.subtheme} />
-          <.stat label="Colors" value={@result && @result.colors} />
+          <.stat label="Budget" value={(@result && @result.budget) || " "} />
+          <.stat label="Archetype" value={(@result && @result.archetype) || " "} />
+          <.stat label="Subtheme" value={(@result && @result.subtheme) || " "} />
+          <.stat label="Colors" value={(@result && @result.colors) || " "} />
         </div>
       </div>
     </div>
@@ -69,7 +69,7 @@ defmodule MtgWheelWeb.WheelLive do
     <div class="flex flex-col items-center gap-2">
       <span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
       <div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
-        <div class={["wheel-inner absolute inset-0 flex flex-col items-center", @spinning && "spinning"]}>
+        <div class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}>
           <%= for _ <- 1..5 do %>
             <%= for item <- @items do %>
               <div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1">