adaptive screen size + overflow

src/App.vue

@@ -32,7 +32,7 @@ export default {
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
-    margin-top: 60px;
+    
 }
 
 * {
@@ -40,6 +40,7 @@ export default {
     padding: 0;
 }
 
+
 body {
     background: black;
     color: white;
@@ -63,10 +64,12 @@ h1 {
 }
 
 #main {
-    flex: 4;
+    
 }
 
 #container {
     display: flex;
+    height: calc(100vh - 100px);
+    overflow: hidden;
 }
 </style>

src/components/Canvas.vue

@@ -1,5 +1,5 @@
 <template>
-  <main id="main">
+  <main id="mainContent">
     <canvas
       id="canvas"
       ref="canvas"
@@ -46,8 +46,10 @@ export default {
   mounted() {
     this.canvas = this.$refs['canvas']
     this.ctx = this.canvas.getContext('2d')
+    this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
+    this.$store.commit('setCanvasHeight', this.canvas.parentElement.clientHeight)
     this.$root.$on('draw1d', () => { this.draw1d() })
-     this.$root.$on('draw2dNew', () => { this.draw2dNew() })
+    this.$root.$on('draw2dNew', () => { this.draw2dNew() })
     this.$root.$on('draw2dLast', () => { this.draw2dLast() })
     this.$root.$on('reset', () => { this.reset() })
     this.$root.$on('stop', () => { this.stop() })
@@ -125,4 +127,8 @@ export default {
   }
 }
 </script>
-
+<style>
+  #mainContent {
+      min-width: 70%;
+  }
+</style>

src/components/MainMenu.vue

@@ -25,8 +25,8 @@ export default {
 
 <style>
 #sidebar {
-    flex-basis: fit-content;
+    width: 25%;
     padding: 0 10px;
-    width: fit-content;
+    overflow-y: scroll;
 }
 </style>

src/store/index.js

@@ -21,8 +21,8 @@ export default new Vuex.Store({
       liveColor: '#000000',
       deadColor: '#AA78E8',
     },
-    canvasWidth: 1280,
-    canvasHeight: 720,
+    canvasWidth: 0,
+    canvasHeight: 0,
     refreshRate: 300,
     initial1dState: "onecell",
     activeMenu: "Elementary Cellular Automata",