From 703de3e6694b8380f12ee6e9d6129e86d5103a1a Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Thu, 25 Sep 2025 13:21:17 -0700
Subject: [PATCH] Fix/vue nodes markdown (#5771)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Improve markdown node by making the textarea match the rendered output
width and height.

## Screenshots (if applicable)


https://github.com/user-attachments/assets/4701f947-0a4f-40f3-83c0-94e53cd10106


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5771-Fix-vue-nodes-markdown-2796d73d365081129428fe9c38178cc4)
by [Unito](https://www.unito.io)
---
 .../vueNodes/widgets/components/WidgetMarkdown.vue  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index f165b0a68..7f3995f9e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -5,22 +5,21 @@
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      v-if="!isEditing"
-      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
+      class="comfy-markdown-content hover:bg-[var(--p-content-hover-background)] text-sm min-h-[60px] w-full rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
+      :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
 
     <!-- Edit mode: Textarea -->
     <Textarea
-      v-else
+      v-show="isEditing"
       ref="textareaRef"
       v-model="localValue"
       :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      :rows="6"
+      class="w-full min-h-[60px] absolute inset-0 resize-none"
       :pt="{
         root: {
+          class: 'text-sm w-full h-full',
           onBlur: handleBlur
         }
       }"
@@ -92,7 +91,7 @@ const handleBlur = () => {
   border-radius: var(--p-border-radius);
 }
 
-.widget-markdown:hover:not(:has(textarea)) {
+.comfy-markdown-content:hover {
   background-color: var(--p-content-hover-background);
 }
 </style>