Improve board container UI

Enhance DominoRetilingPuzzle board by enlarging the container to remove scrolling, and add cleaner boundaries with padding and rounded corners. Adjust surrounding layout accordingly.

X-Lovable-Edit-ID: edt-922d5ab6-04d3-4109-911c-0f050d43acb5

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 && (