Layout for EngineDebug must not overlap with play area. Otherwise you can't click on buttons

client/src/components/EngineDebug.vue

@@ -20,17 +20,14 @@ export default {
 
 <style lang="scss">
 .enginedebug {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
   background-color: rgba(0, 32, 64, 0.75);
-  max-width: 600px;
   overflow: auto;
 
   &__json {
-    margin: 1em 2em;
     color: #808080;
+    font-size: 10px;
   }
 }
 </style>

client/src/pages/play.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-play">
-    <EngineDebug />
+    <div class="page-play__container">
+      <div class="page-play__container-game">
         <div class="page-play__gamecontrols">
           <GameControls />
         </div>
@@ -12,6 +13,11 @@
           <Play v-if="gameState === 'play'" />
         </div>
       </div>
+      <div class="page-play__container-debug">
+        <EngineDebug />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -35,8 +41,23 @@ export default {
 
 <style lang="scss">
 .page-play {
+  width: 100%;
+
+  &__container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &-game {
       display: flex;
       flex-direction: column;
+      width: 100%;
+    }
+    &-debug {
+      max-width: 350px;
+      max-height: 100%;
+    }
+  }
 
   &__controls {
     flex: 0 1 auto;