Fix size problems on draw/text page

src/components/editor/MonacoEditor.vue

@@ -238,17 +238,14 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .monaco-editor {
-  display: flex;
-  flex: 1;
+  overflow: hidden;
   flex-direction: column;
   margin-top: 2.5rem;
-  //132px is the combined navbar + file tabs height
-  height: calc(100vh - 216px);
+  //225px is the combined navbar + file tabs height + console footer min size
+  height: calc(100vh - 225px);
 
   #container {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
+    height: 100%;
   }
 }
 </style>

src/css/app.scss

@@ -28,3 +28,7 @@ code {
   background-color: white;
   mask: url(../assets/logo.svg) no-repeat center;
 }
+ .flex-1 {
+   flex: 1;
+   height: 100%
+ }

src/pages/ModelizerDrawPage.vue

@@ -1,13 +1,12 @@
 <template>
-  <q-page class="bg-grey-3">
+  <q-page class="bg-grey-3 column">
     <div
       id="view-port"
       data-cy="draw-container"
+      class="column"
       @dragover.prevent
       @drop.prevent="dropHandler"
-    >
-      <component-drop-overlay />
-    </div>
+    />
 
     <q-page-sticky :offset="[20, 20]">
       <div class="row">
@@ -38,7 +37,6 @@
 </template>
 
 <script setup>
-import ComponentDropOverlay from 'components/drawer/ComponentDropOverlay.vue';
 import {
   addNewTemplateComponent,
   getPluginByName,
@@ -334,33 +332,15 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
-#view-port {
-  height: calc(100vh - 76px);
-  width: 100%;
-}
-</style>
-
 <style lang="scss">
-// Quasar sets overflow to 'hidden' on all svg.
-// In our case, it needs to be set to 'visible' to manage position with % in plugin models.
-div#view-port svg {
-  overflow: visible !important;
-  display: unset;
-  height: 100%;
-  width: 100%;
-}
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#viewport {
+div#view-port, div#view-port svg.scene {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+
+  flex: 1;
+  height: 100%;
+  width: 100%;
 }
 </style>