diff --git a/src/components/drawer/ComponentDropOverlay.vue b/src/components/drawer/ComponentDropOverlay.vue
deleted file mode 100644
index 6b6f1e136..000000000
--- a/src/components/drawer/ComponentDropOverlay.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div id="overlay">
-    <div class="overlay-background" />
-    <q-card
-      id="text"
-      rounded
-      class="overlay-text"
-      flat
-    >
-      <q-card-section>
-        <q-avatar>
-          <q-icon name="fa-solid fa-plus" />
-        </q-avatar>
-        {{ $t('actions.default.dropZoneMessage') }}
-      </q-card-section>
-    </q-card>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  #overlay {
-    display: none;
-  }
-  .overlay-background {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0.5;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: $primary;
-  }
-  .overlay-text {
-    border-radius: 45px;
-    background-color: white
-  }
-  #text{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-size: 20px;
-    color: $primary;
-    transform: translate(-50%,-50%);
-    -ms-transform: translate(-50%,-50%);
-  }
-</style>
diff --git a/src/components/editor/MonacoEditor.vue b/src/components/editor/MonacoEditor.vue
index ac277b3e2..db5b9b1e2 100644
--- a/src/components/editor/MonacoEditor.vue
+++ b/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>
diff --git a/src/css/app.scss b/src/css/app.scss
index ab4920216..9dcc0c6cd 100644
--- a/src/css/app.scss
+++ b/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%
+ }
diff --git a/src/pages/ModelizerDrawPage.vue b/src/pages/ModelizerDrawPage.vue
index e86818e87..e9dee6da7 100644
--- a/src/pages/ModelizerDrawPage.vue
+++ b/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>