update board dimensions after window resize

src/components/CanvasBoard.vue

@@ -38,6 +38,8 @@
         getDraw1d: "draw1d",
         getDraw2d: "draw2d",
         getDraw2dLast: "draw2dLast",
+        boardWidth: "boardWidth",
+        boardHeight: "boardHeight",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -45,12 +47,6 @@
         canvasHeight: "canvasHeight",
         getReset: "reset",
       }),
-      boardWidth: function () {
-        return Math.floor(this.canvasWidth / this.cellProperties.size);
-      },
-      boardHeight: function () {
-        return Math.floor(this.canvasHeight / this.cellProperties.size);
-      },
     },
     watch: {
       getDraw1d(value) {
@@ -71,9 +67,15 @@
       this.ctx = this.canvas.getContext("2d");
       this.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
+      this.setBoardWidth();
+      this.setBoardHeight();
     },
     methods: {
-      ...mapActions(globalStore, ["toggleStop"]),
+      ...mapActions(globalStore, [
+        "toggleStop",
+        "setBoardWidth",
+        "setBoardHeight",
+      ]),
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {

src/components/MenuReset.vue

@@ -30,7 +30,7 @@
 <style scoped>
   .form-field {
     display: flex;
-    margin: 0;
+    margin: 5px;
     justify-content: flex-end;
   }
 </style>