Surround field with border

Fixes #27.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.0.50",
+    "version": "0.0.51",
     "description": "Just Minesweeper!",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",

src/main/css/main.css

@@ -17,9 +17,10 @@
 
 #canvasContainer {
     text-align: center;
-    overflow: auto;
 }
 
 #canvas {
     display: inline;
+    box-sizing: border-box;
+    border: 4mm ridge #bdbdbd;
 }

src/main/js/Display.ts

@@ -141,8 +141,8 @@ export class Display {
     posToSquare(pos: { x: number, y: number }): Square | null {
         const rect = this.canvas.getBoundingClientRect();
         return this.field?.getSquareOrElse(
-            Math.floor((pos.x - rect.left) / this.scale),
-            Math.floor((pos.y - rect.top) / this.scale),
+            Math.floor((pos.x - rect.left - this.canvas.clientLeft) / this.scale),
+            Math.floor((pos.y - rect.top - this.canvas.clientTop) / this.scale),
             null
         );
     }
@@ -190,8 +190,8 @@ export class Display {
 
         // Create grid
         ctx.save();
-        ctx.strokeStyle = "#7b7b7b";
         ctx.beginPath();
+        ctx.strokeStyle = "#7b7b7b";
         for (let x = 0; x <= this.field.width; x++) {
             ctx.moveTo(x * scale, 0);
             ctx.lineTo(x * scale, this.field.height * scale);