inital-release

public/game.js

@@ -217,7 +217,7 @@ class KruiswoordProGame {
           },
           {
             word     : 'VLIEG',
-            clue     : 'Insect →',
+            clue     : 'Insect',
             startRow : 2,
             startCol : 0,
             direction: 'horizontal',
@@ -244,24 +244,42 @@ class KruiswoordProGame {
     const headerHeight = isMobile ? 70 : 80
     const progressHeight = isMobile ? 50 : 60
     const controlsHeight = isMobile ? 90 : 120
-    const padding = isMobile ? 20 : 40
+    const gridPadding = isMobile ? 10 : 20 // padding inside grid-container
+    const sectionPadding = isMobile ? 20 : 40 // padding of puzzle-section
+    const totalPadding = (gridPadding * 2) + (sectionPadding * 2)
     const gap = 2
 
-    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
-    const availableWidth = window.innerWidth - padding
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
+    const availableWidth = window.innerWidth - totalPadding
 
     // Calculate max cell size based on available space
-    const maxCellFromHeight = (availableHeight - (rows * gap)) / rows
-    const maxCellFromWidth = (availableWidth - (cols * gap)) / cols
+    // Account for gaps between cells
+    const totalGapHeight = (rows - 1) * gap
+    const totalGapWidth = (cols - 1) * gap
+
+    const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
+    const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
 
     // Use the smaller dimension
     let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
 
     // Set min/max bounds based on device
-    const minSize = isMobile ? 32 : 40
-    const maxSize = isMobile ? 60 : 120
+    const minSize = isMobile ? 28 : 40
+    const maxSize = isMobile ? 55 : 120
     cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
 
+    console.log('Grid calculation:', {
+      isMobile,
+      availableWidth,
+      availableHeight,
+      rows,
+      cols,
+      maxCellFromWidth,
+      maxCellFromHeight,
+      finalCellSize: cellSize,
+      totalGridWidth: cols * cellSize + totalGapWidth
+    })
+
     return cellSize
   }
 

public/styles_v1.css

@@ -170,7 +170,8 @@ body {
   border-radius: 15px;
   padding: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-  overflow: auto;
+  overflow: visible;
+  position: relative;
 }
 
 @media (max-width: 768px) {
@@ -182,6 +183,7 @@ body {
   .puzzle-section {
     padding: 10px;
     border-radius: 10px;
+    overflow: visible;
   }
 }
 
@@ -193,6 +195,8 @@ body {
   padding: 10px;
   border-radius: 10px;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 0 auto;
+  max-width: 100%;
 }
 
 @media (max-width: 768px) {