fix(ui): allow autocomplete textarea resize in app mode (#1020)

vue-widgets/src/components/AutocompleteTextWidget.vue

@@ -271,12 +271,14 @@ onUnmounted(() => {
   overflow: hidden;
   overflow-y: auto;
   padding: 2px 2px 24px 2px;  /* Reserve bottom space for clear button */
-  resize: none;
   border: none;
   border-radius: 0;
   box-sizing: border-box;
   font-size: var(--comfy-textarea-font-size, 10px);
   font-family: monospace;
+  /* resize:none set here (0,2,0). Overridden to vertical in app mode
+     by the :global(.\[\&_textarea\]\:resize-y) .text-input rule below. */
+  resize: none;
 }
 
 /* Vue DOM mode styles - matches built-in p-textarea in Vue DOM mode */
@@ -350,4 +352,19 @@ onUnmounted(() => {
   width: 14px;
   height: 14px;
 }
+
+</style>
+
+<!--
+  Non-scoped !important override: scoped .text-input[data-v-xxx] (0,2,0)
+  beats the app-mode Tailwind rule (0,1,1), so we use !important here to
+  force resize:vertical only when inside the app-mode widget list.
+  The data-testid attribute scoping prevents it from leaking into graph
+  mode.  This is the only !important in the widget stylesheets.
+-->
+<style>
+[data-testid="app-mode-widget-item"] textarea,
+[data-testid="builder-widget-item"] textarea {
+  resize: vertical !important;
+}
 </style>

vue-widgets/src/main.ts

@@ -553,22 +553,22 @@ function normalizeAutocompleteWidgetValues(node: any, info: any) {
 
 function applyAutocompleteTextLayoutFix(
   widget: any,
-  container: HTMLElement | undefined,
+  _container: HTMLElement | undefined,
   isVueMode: boolean
 ): void {
+  // In Vue rendering mode the WidgetDOM wrapper handles sizing, so we
+  // only provide a computeSize hint and leave the container unconstrained.
+  // In canvas mode we clear all custom sizing so LiteGraph's default
+  // widget-area layout takes over.  Neither path sets a hard max-height;
+  // the textarea can grow freely (e.g. in app mode where
+  // [&_textarea]:resize-y applies).
   if (isVueMode) {
     ;(widget as any).computeLayoutSize = undefined
     widget.computeSize = (width?: number) =>
       [width ?? 200, AUTOCOMPLETE_TEXT_WIDGET_MAX_HEIGHT - 4]
-    if (container) {
-      container.style.minHeight = `${AUTOCOMPLETE_TEXT_WIDGET_MAX_HEIGHT}px`
-    }
   } else {
     delete (widget as any).computeLayoutSize
     delete (widget as any).computeSize
-    if (container) {
-      container.style.minHeight = ''
-    }
   }
 }
 
@@ -743,8 +743,12 @@ function createAutocompleteTextWidgetFactory(
   vueApps.set(appKey, vueApp)
 
   if (maxHeight) {
-    container.style.maxHeight = `${maxHeight}px`
-    container.style.minHeight = `${maxHeight}px`
+    // Set only minHeight as a true minimum — remove maxHeight so the
+    // textarea can grow when the user resizes it in app mode (where
+    // [&_textarea]:resize-y applies).  Graph mode (canvas & Vue render)
+    // is unaffected because LiteGraph's layout system still governs
+    // the widget area size.
+    container.style.minHeight = `${AUTOCOMPLETE_TEXT_WIDGET_MIN_HEIGHT}px`
   }
 
   if (modelType === 'loras') {