Board designer: scrollable grid + 40px touch targets on mobile

Author: Swon404

src/screens/BoardDesignerScreen.tsx

@@ -465,13 +465,15 @@ export function BoardDesignerScreen() {
         </div>
         <p className="hint">Custom boards can now be sized from 4x4 up to 20x20. Odd heights leave a neutral middle rank empty.</p>
 
+        <div
+          className="board-designer-scroll-wrap"
+          style={{ touchAction: activeBrush ? "none" : undefined }}
+        >
         <div
           className={`board-designer-grid board-theme-${theme}`}
           style={{
             position: "relative",
-            aspectRatio: `${boardWidth} / ${boardHeight}`,
             ["--designer-cell-size" as string]: `${designerCellSize}px`,
-            touchAction: activeBrush ? "none" : undefined,
           }}
           onPointerDown={() => { if (activeBrush) isPaintingRef.current = true; }}
           onPointerMove={(e) => {
@@ -557,6 +559,7 @@ export function BoardDesignerScreen() {
             </div>
           ))}
         </div>
+        </div>
 
         {activeBrush && (
           <div className="board-designer-brush-bar">

src/styles.css

@@ -1388,12 +1388,18 @@ button.mgrid-cell:hover {
    Board Designer
    ============================================================ */
 
+.board-designer-scroll-wrap {
+  width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: 4px;
+  margin: 8px 0;
+}
 .board-designer-grid {
   display: inline-block;
   border: 2px solid rgba(148,163,184,0.25);
   border-radius: 4px;
   overflow: hidden;
-  margin: 8px 0;
 }
 .board-row {
   display: flex;
@@ -1468,6 +1474,13 @@ button.mgrid-cell:hover {
 .board-designer-square.has-brush {
   cursor: crosshair;
 }
+@media (max-width: 640px) {
+  .board-designer-square,
+  .board-designer-mirror {
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
 /* piece-custom: fills 88% of the square like piece-svg; font-size inherited from .square */
 .piece-custom {
   display: flex;