diff --git a/ayanova/src/views/ay-report-edit.vue b/ayanova/src/views/ay-report-edit.vue
index a9eef54f..800dc337 100644
--- a/ayanova/src/views/ay-report-edit.vue
+++ b/ayanova/src/views/ay-report-edit.vue
@@ -1,5 +1,13 @@
 <template>
-  <MonacoEditor class="editor" v-model="code" language="javascript" />
+  <div v-resize="onResize">
+    <MonacoEditor
+      class="editor"
+      v-model="code"
+      language="javascript"
+      :options="monacoOptions"
+      :style="editStyle()"
+    />
+  </div>
   <!-- <gz-report-viewer
     :reportId="$route.params.recordid"
     :ayaType="$route.params.ayatype"
@@ -11,7 +19,7 @@
 /*  Xeslint-disable    */
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
+//https://github.com/egoist/vue-monaco
 import MonacoEditor from "vue-monaco";
 
 const FORM_KEY = "ay-report-edit";
@@ -36,6 +44,8 @@ export default {
       editingActiveTranslation: false,
       duplicating: false,
       code: "const noop = () => {}",
+      monacoOptions: { automaticLayout: true },
+      editAreaHeight: 300,
       obj: {},
       formState: {
         ready: false,
@@ -50,12 +60,22 @@ export default {
       rights: window.$gz.role.defaultRightsObject(),
       ayaType: window.$gz.type.Translation
     };
+  },
+  methods: {
+    onResize() {
+      // this.editAreaHeight = window.innerHeight / 2;
+      this.editAreaHeight = window.innerHeight * 0.9;
+    },
+    editStyle() {
+      return "height: " + this.editAreaHeight + "px;";
+    }
   }
 };
 </script>
 <style>
 .editor {
-  width: 600px;
-  height: 800px;
+  width: 100%;
+  height: 100%;
+  border: 1px solid grey;
 }
 </style>