From e3d1512145bf47de2dc98304bca6a2867118abdc Mon Sep 17 00:00:00 2001
From: lubiana <lubiana@hannover.ccc.de>
Date: Sat, 12 Jul 2025 19:06:54 +0200
Subject: [PATCH] hmmm

---
 src/App.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bc72891..156a953 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -124,7 +124,7 @@ function App() {
 
   // --- UI ---
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
+    <div className="min-h-screen bg-gray-100 flex flex-col items-center ">
       <h1 className="text-3xl font-bold text-blue-600 mb-2">Scratch Card Game</h1>
       <div className="mb-4 text-lg">Money: <span className="font-mono font-bold">${money}</span></div>
       <div className="mb-4 text-lg">Gubble Points: <span className="font-mono font-bold">{gubblePoints}</span></div>
@@ -142,17 +142,18 @@ function App() {
         upgrades={upgrades}
         onBuyUpgrade={handleBuyUpgrade}
       />
-      <div className="flex flex-wrap gap-6 mb-8 justify-center">
+      <div className="mb-8 w-full max-w-5xl overflow-x-auto whitespace-nowrap flex flex-row items-center space-x-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
         {TIERS.map((tier) => (
-          <TierCard
-            key={tier.name}
-            tier={tier}
-            unlocked={unlockedTiers.includes(tier.name)}
-            money={money}
-            onUnlock={handleUnlockTier}
-            onBuy={handleBuyCard}
-            gubblePointChance={tier.gubblePointChance}
-          />
+          <div key={tier.name} className="inline-block min-w-[8rem]">
+            <TierCard
+              tier={tier}
+              unlocked={unlockedTiers.includes(tier.name)}
+              money={money}
+              onUnlock={handleUnlockTier}
+              onBuy={handleBuyCard}
+              gubblePointChance={tier.gubblePointChance}
+            />
+          </div>
         ))}
       </div>
       {card && (