From ddad5ba645fe6906f98c0a3ecc72c4d9b3fe2dcc Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 21 Aug 2025 11:25:26 +0000
Subject: [PATCH] Refactor Bulgarian Solitaire layout

Adjusted the layout of Bulgarian Solitaire to display up to 15 columns before wrapping to a new row. Removed labels from the small black boxes as they are unnecessary.
---
 src/components/BulgarianSolitaire.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/BulgarianSolitaire.tsx b/src/components/BulgarianSolitaire.tsx
index 881ed45..8385049 100644
--- a/src/components/BulgarianSolitaire.tsx
+++ b/src/components/BulgarianSolitaire.tsx
@@ -269,9 +269,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
                 key={box.id}
                 draggable={!isPlaying}
                 onDragStart={(e) => handleDragStart(e, box.id)}
-                className="w-8 h-8 bg-primary rounded cursor-move hover:bg-primary/80 transition-colors flex items-center justify-center text-primary-foreground text-xs font-medium"
+                className="w-8 h-8 bg-primary rounded cursor-move hover:bg-primary/80 transition-colors"
               >
-                {box.id + 1}
               </div>
             ))}
           </div>
@@ -287,13 +286,14 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
           )}
         </div>
         
-        <div className="flex justify-center gap-1 flex-wrap max-w-2xl mx-auto">
+        <div className="flex justify-center gap-1 flex-wrap max-w-full mx-auto">
           {columns.map((column, index) => (
             <div
               key={index}
               onDragOver={handleDragOver}
               onDrop={(e) => handleDrop(e, index)}
               className="border border-muted-foreground rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-500"
+              style={{ flexBasis: `calc(${100/15}% - 0.25rem)`, minWidth: '48px' }}
             >
               <div className="text-xs text-center text-muted-foreground mb-1 transform rotate-0">
                 {index + 1}
@@ -311,7 +311,6 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
                   } ${isAnimating && highlightedBoxes.has(boxId) ? 'animate-pulse' : ''}`}
                   title="Drag to move or double-click to return to container"
                 >
-                  {boxId + 1}
                 </div>
               ))}
             </div>