adaptive screen size + overflow

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>