Show all lines of code in the monaco editor without overflow on the history tab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextline-web",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "private": false,
   "type": "module",
   "scripts": {

src/components/rdb/AsyncEditor.vue

@@ -4,7 +4,7 @@
     <template #fallback>
       <div style="height: 100%">
         <VProgressLinear indeterminate></VProgressLinear>
-        <!-- <pre class="overflow-auto" style="height: 100%">{{ source }}</pre> -->
+        <pre class="pl-5">{{ source }}</pre>
       </div>
     </template>
   </Suspense>

src/components/rdb/Editor.vue

@@ -1,9 +1,9 @@
 <template>
-  <div ref="element" style="height: 100%"></div>
+  <div ref="element" :style="{ height: editorHeight }" @wheel.stop.capture></div>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from "vue";
+import { computed, ref, toRefs } from "vue";
 
 import { useMonacoEditor } from "@/utils/monaco-editor";
 
@@ -13,6 +13,15 @@ interface Props {
 const props = defineProps<Props>();
 const { source } = toRefs(props);
 const element = ref<HTMLElement>();
+
+const nLines = computed(() => source.value.split("\n").length);
+const lineHeight = 24; // From monaco-editor
+const padding = 10; // TODO: Check if this is correct
+const editorHeight = computed(() => {
+  const height = nLines.value * lineHeight + padding;
+  return `${height}px`;
+});
+
 // await new Promise((resolve) => setTimeout(resolve, 2000));
 await useMonacoEditor({ element, source });
 </script>

src/components/rdb/RunCard.vue

@@ -30,7 +30,7 @@
     </div>
     <div class="g-script">
       <VCardSubtitle class="font-weight-bold"> Script </VCardSubtitle>
-      <VCardText style="height: 100%">
+      <VCardText>
         <AsyncEditor v-if="run?.script" :source="run?.script"></AsyncEditor>
       </VCardText>
     </div>
@@ -104,7 +104,8 @@ function formatDateTime(dateTime: string) {
   grid-area: script;
   display: grid;
   grid-template-columns: minmax(100px, 1fr);
-  grid-template-rows: min-content minmax(200px, 1fr);
+  /* grid-template-rows: min-content minmax(200px, 1fr); */
+  grid-template-rows: min-content min-content;
 }
 
 .g-stdout {

src/components/rdb/RunView.vue

@@ -1,24 +1,3 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
-
-import { useRdbRunQuery } from "@/graphql/codegen/generated";
-
-import RunCard from "./RunCard.vue";
-
-const route = useRoute();
-const runNo = Number(route.params.runNo);
-
-const breadcrumb = computed(() => [
-  { title: "Runs", to: { name: "runs" }, exact: true },
-  { title: `Run ${runNo}`, to: { name: "run", params: { runNo } } },
-]);
-
-const queryResponse = useRdbRunQuery({ variables: { runNo } });
-
-const run = computed(() => queryResponse.data.value?.rdb.run);
-</script>
-
 <template>
   <div class="g-container">
     <div class="g-navi">
@@ -39,13 +18,34 @@ const run = computed(() => queryResponse.data.value?.rdb.run);
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+import { useRdbRunQuery } from "@/graphql/codegen/generated";
+
+import RunCard from "./RunCard.vue";
+
+const route = useRoute();
+const runNo = Number(route.params.runNo);
+
+const breadcrumb = computed(() => [
+  { title: "Runs", to: { name: "runs" }, exact: true },
+  { title: `Run ${runNo}`, to: { name: "run", params: { runNo } } },
+]);
+
+const queryResponse = useRdbRunQuery({ variables: { runNo } });
+
+const run = computed(() => queryResponse.data.value?.rdb.run);
+</script>
+
 <style scoped>
 .g-container {
   display: grid;
   padding: 12px;
   justify-content: center;
   grid-template-columns: minmax(min-content, 960px);
-  grid-template-rows: min-content min-content 1fr;
+  grid-template-rows: min-content min-content min-content;
   grid-template-areas: "navi" "button" "card";
 }