Finally fix auto-adjusting monaco editor width and height?

components/Editor.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="overflow-hidden">
-        <div class="flex items-center justify-between h-10 p-1 bg-white border-b">
+        <div ref="toolbar" class="flex items-center justify-between h-10 p-1 bg-white border-b">
             <div>
                 <select
                     name="language"
                     :value="language"
                     @change="(event) => $emit('update:language', event.target.value)"
-                    class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 rounded-lg  focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                    class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                 >
                     <option
                         v-for="option in $shiki.languages()"
@@ -29,7 +29,7 @@
                         name="tabSize"
                         :value="tabSize"
                         @change="(event) => $emit('update:tab-size', event.target.value)"
-                        class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 rounded-lg  focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                        class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 rounded-lg focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                     >
                         <option :value="2">2</option>
                         <option :value="4">4</option>
@@ -71,13 +71,7 @@
                         type="button"
                         @click="$emit('update:layout', false)"
                         :class="[landscape ? 'text-gray-400' : 'bg-white shadow-sm text-gray-600']"
-                        class="
-                            py-0.5
-                            px-2
-                            rounded-md
-                            hover:bg-white hover:shadow-sm
-                            focus:outline-none
-                        "
+                        class="py-0.5 px-2 rounded-md hover:bg-white hover:shadow-sm focus:outline-none"
                     >
                         <CreditCardIcon class="w-5 h-5" />
                         <span class="sr-only">Top over bottom</span>
@@ -87,15 +81,7 @@
                         type="button"
                         @click="$emit('update:layout', true)"
                         :class="[!landscape ? 'text-gray-400' : 'bg-white shadow-sm text-gray-600']"
-                        class="
-                            py-0.5
-                            px-2
-                            ml-0.5
-                            h-full
-                            rounded-md
-                            hover:bg-white hover:shadow-sm
-                            focus:outline-none
-                        "
+                        class="py-0.5 px-2 ml-0.5 h-full rounded-md hover:bg-white hover:shadow-sm focus:outline-none"
                     >
                         <ColumnsIcon class="w-5 h-5" />
                         <span class="sr-only">Side By Side</span>
@@ -104,11 +90,7 @@
             </div>
         </div>
 
-        <div
-            ref="monaco"
-            style="min-height: 400px"
-            :class="{ 'h-full w-full': landscape, 'w-full h-full': !landscape }"
-        ></div>
+        <div ref="monaco" class="w-full h-full"></div>
     </div>
 </template>
 
@@ -185,12 +167,6 @@ export default {
 
         window.addEventListener('resize', this.updateMonacoLayout);
 
-        // Here we will force update the Monaco layout after it starts.
-        // This allows Monaco to observe its container size and adjust
-        // its width and height automatically to fill its parent.
-        // @see https://github.com/microsoft/monaco-editor/issues/115#issue-172220873
-        // @see https://github.com/microsoft/monaco-editor/issues/1482#issuecomment-506645262
-        this.editor.onDidScrollChange(() => this.updateMonacoLayout());
         this.$nuxt.$on('adjust-editors', () => this.updateMonacoLayout());
 
         this.editor.onDidChangeModelContent((event) => {
@@ -203,13 +179,13 @@ export default {
     },
 
     beforeDestroy() {
+        window.removeEventListener('resize', this.updateMonacoLayout);
+
         this.editor && this.editor.dispose();
     },
 
     destroyed() {
         this.$nuxt.$emit('adjust-editors');
-
-        window.removeEventListener('resize', this.updateMonacoLayout);
     },
 
     computed: {
@@ -227,7 +203,10 @@ export default {
     methods: {
         updateMonacoLayout() {
             if (this.$refs.monaco && this.$refs.monaco.offsetParent) {
-                this.editor.layout();
+                this.editor.layout({
+                    width: this.$refs.monaco.clientWidth,
+                    height: this.$refs.monaco.clientHeight - this.$refs.toolbar.clientHeight,
+                });
             }
         },
     },

components/Page.vue

@@ -7,7 +7,7 @@
         }"
     >
         <div
-            class="flex w-full overflow-hidden bg-white"
+            class="flex w-full h-full overflow-hidden bg-white"
             :class="{
                 'divide-y flex-col': isLandscape,
                 'divide-x flex-row': isPortrait,