added styles with aspect ratio;

src/engine/Graphics2d.module.css

@@ -1,60 +1,58 @@
-.wrapperStyles {
-    width: 100%;
-    justify-content: center;
-    overflow: scroll;
-    padding: 0;
-    height: calc(100% - 0.5rem);
-    margin: 0;
 
-}
 
-.canvasStyles {
-    display: block;
-    width: 150vw;
-    height: 100%;
-    margin: 0;
-    padding: 0;
+@media screen and (max-width: 768px) {
+
+    .wrapperStyles {
+        width: 100%;
+        height: 100vh;
+        justify-content: center;
+        overflow: scroll;
+    }
+
+    .canvasStyles {
+        display: block;
+        width: 150vw;
+    }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px )  and (max-width: 1024px) {
+
     .wrapperStyles {
         height: calc(100% - 2.5rem);
         width: calc(100% - 3rem);
         border: 2px solid #dc5e47;
         border-radius: 10px;
     }
     .canvasStyles {
-        width: 150vw;
-        height: calc(100% - 3rem);
-    }
-}
-@media screen and(min-width: 768px) {
-    .wrapperStyles {
-        height: calc(100% - 3rem);
-        width: calc(100%- 3rem);
+        aspect-ratio: 1 / 1;
     }
 }
 
 @media screen and (orientation: landscape) and (min-width: 768px) {
+
     .wrapperStyles {
         height: calc(100% - 2.5rem);
         width: calc(100%- 3rem);
+        border: none;
     }
-
     .canvasStyles {
-        width: 80vw;
-        height: calc(100% - 0.5rem);
+        aspect-ratio: 1 / 1;
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
     }
+
 }
 
-@media screen and (orientation: landscape) and (min-width: 1024px) {
+
+@media screen and (min-width: 1024px) and (orientation: landscape) {
+
     .wrapperStyles {
-        width: 80%;
         height: calc(100% - 0.5rem);
-        display: flex;
+        aspect-ratio: 1/1;
     }
+
     .canvasStyles {
-        width: 150vw;
-        height: calc(100% - 0.5rem);
+        margin: 0 auto;
     }
 }
+

src/ui/Main.module.css

@@ -116,7 +116,7 @@
     position: absolute;
     left: 25px;
     top: 100px;
-    z-index: 900;
+    z-index: 1010;
   }
 
   .bottleft {
@@ -125,7 +125,7 @@
     position: absolute;
     left: 25px;
     bottom: 25px;
-    z-index: 1000;
+    z-index: 1010;
   }