From 56c73bf7144a5f22ccd69e9781ab0d590cfe90c8 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 8 Dec 2025 09:41:19 +0000
Subject: [PATCH] Changes

---
 src/components/DominoRetilingPuzzle.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/DominoRetilingPuzzle.tsx b/src/components/DominoRetilingPuzzle.tsx
index b58aa02..4ded952 100644
--- a/src/components/DominoRetilingPuzzle.tsx
+++ b/src/components/DominoRetilingPuzzle.tsx
@@ -186,7 +186,7 @@ const DominoRetilingPuzzle: React.FC<DominoRetilingPuzzleProps> = ({ showSocialS
     return 'bg-rose-400 border-rose-600';
   };
 
-  const cellSize = Math.min(50, 400 / boardSize);
+  const cellSize = Math.max(32, Math.min(44, 480 / boardSize));
 
   // Render the board
   const renderBoard = () => {
@@ -422,16 +422,20 @@ const DominoRetilingPuzzle: React.FC<DominoRetilingPuzzleProps> = ({ showSocialS
 
       {/* Board */}
       <Card>
-        <CardContent className="p-6">
-          <div className="flex justify-center overflow-x-auto">
+        <CardContent className="p-8">
+          <div className="flex justify-center">
             <div 
-              className="relative border-2 border-foreground/30 bg-background"
-              style={{
-                width: BOARD_COLS * cellSize,
-                height: BOARD_ROWS * cellSize,
-              }}
+              className="relative bg-background rounded-lg border border-border shadow-sm p-3"
             >
-              {renderBoard()}
+              <div
+                className="relative"
+                style={{
+                  width: BOARD_COLS * cellSize,
+                  height: BOARD_ROWS * cellSize,
+                }}
+              >
+                {renderBoard()}
+              </div>
             </div>
           </div>
           {selectedDomino !== null && (