diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 5a4a669aa..b773c7bf1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -4,6 +4,7 @@
       v-model="articleTitle"
       type="text"
       rows="1"
+      :min-height="6"
       class="article-heading"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
       @focus="onFocus"
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 25bd9d3d6..f5c42ba6b 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -19,6 +19,7 @@
       v-model="greetingsMessage"
       rows="4"
       type="text"
+      :min-height="6"
       class="greetings--textarea"
       :label="label"
       :placeholder="placeholder"
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 8257694f5..54176649b 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -1,6 +1,7 @@
 <template>
   <textarea
     ref="textarea"
+    :style="{ height: textareaHeight }"
     :placeholder="placeholder"
     :value="value"
     @input="onInput"
@@ -18,6 +19,7 @@ import {
 } from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
+const PIXELS_PER_REM = 16;
 export default {
   props: {
     placeholder: {
@@ -50,6 +52,7 @@ export default {
   data() {
     return {
       idleTimer: null,
+      textareaHeight: `${this.minHeight * PIXELS_PER_REM}px`,
     };
   },
   computed: {
@@ -91,12 +94,16 @@ export default {
   },
   methods: {
     resizeTextarea() {
-      this.$el.style.height = 'auto';
-      if (!this.value) {
-        this.$el.style.height = `${this.minHeight}rem`;
-      } else {
-        this.$el.style.height = `${this.$el.scrollHeight}px`;
-      }
+      const textarea = this.$refs.textarea;
+      if (!textarea || !this.value) return;
+      // Reset the height to the minimum first to allow shrinking
+      const minHeightPx = this.minHeight * PIXELS_PER_REM;
+      this.textareaHeight = `${minHeightPx}px`;
+
+      this.$nextTick(() => {
+        const newHeight = Math.max(textarea.scrollHeight, minHeightPx);
+        this.textareaHeight = `${newHeight}px`; // Update the height
+      });
     },
     // The toggleSignatureInEditor gets the new value from the
     // watcher, this means that if the value is true, the signature