From e942f41f66cdd7e0f62cefdb65e3a4bb0213eeae Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 11 Dec 2023 18:32:16 +0800
Subject: [PATCH] fix: monaco editor can not adjust height when parent node's
 size changes from large to small

---
 .../src/components/content_value/ContentEditor.vue  | 12 +++++++++++-
 .../components/content_value/ContentEntryEditor.vue | 13 +++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/content_value/ContentEditor.vue b/frontend/src/components/content_value/ContentEditor.vue
index bfd3293..b45ec7e 100644
--- a/frontend/src/components/content_value/ContentEditor.vue
+++ b/frontend/src/components/content_value/ContentEditor.vue
@@ -152,7 +152,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div ref="editorRef" :class="{ 'editor-border': props.border === true }" />
+    <div :class="{ 'editor-border': props.border === true }" style="position: relative">
+        <div ref="editorRef" class="editor-inst" />
+    </div>
 </template>
 
 <style lang="scss" scoped>
@@ -162,4 +164,12 @@ onUnmounted(() => {
     padding: 3px;
     box-sizing: border-box;
 }
+
+.editor-inst {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    right: 2px;
+}
 </style>
diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue
index f969199..0d6a68a 100644
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@@ -157,8 +157,8 @@ const onSave = () => {
 
 <template>
     <div v-show="show" class="entry-editor flex-box-v">
-        <n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%">
-            <div class="editor-content flex-box-v" style="height: 100%">
+        <n-card :title="$t('interface.edit_row')" autofocus class="flex-item-expand" size="small">
+            <div class="editor-content flex-box-v flex-item-expand">
                 <!-- field -->
                 <div class="editor-content-item flex-box-v">
                     <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
@@ -180,7 +180,6 @@ const onSave = () => {
                         :language="viewLanguage"
                         :show-line-num="prefStore.showLineNum"
                         class="flex-item-expand"
-                        style="height: 100%"
                         @input="onInput"
                         @reset="onInput"
                         @save="onSave" />
@@ -248,7 +247,7 @@ const onSave = () => {
             }
 
             &-label {
-                line-height: 1.25;
+                height: 18px;
                 color: v-bind('themeVars.textColor3');
                 font-size: 13px;
                 padding: 5px 0;
@@ -260,6 +259,12 @@ const onSave = () => {
     }
 }
 
+:deep(.n-card__content) {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 :deep(.n-card__action) {
     padding: 5px 10px;
     background-color: unset;