Fix: Widget sizing with multiple expanding items (#7118)

## Summary

Textarea/Markdown/3D pieces grow, other widget rows size to their
contents.

## Screenshots (if applicable)
<img width="564" height="420" alt="image"
src="https://github.com/user-attachments/assets/35aeb9bf-a44d-4e3f-b2cd-a9f3604a7778"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7118-Fix-Widget-sizing-with-multiple-expanding-items-2be6d73d3650816c8153ff3f1e49176d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

Author: 3 people

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="widget-expands relative h-full w-full"
+    class="relative size-full"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @pointerdown.stop
@@ -17,7 +17,7 @@
       :on-model-drop="isPreview ? undefined : handleModelDrop"
       :is-preview="isPreview"
     />
-    <div class="pointer-events-none absolute top-0 left-0 h-full w-full">
+    <div class="pointer-events-none absolute top-0 left-0 size-full">
       <Load3DControls
         v-model:scene-config="sceneConfig"
         v-model:model-config="modelConfig"

src/components/load3d/Load3D.vue

@@ -6,12 +6,15 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] has-[.widget-expands]:flex-1 gap-y-1 pr-3',
+        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] flex-1 gap-y-1 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
       )
     "
+    :style="{
+      'grid-template-rows': gridTemplateRows
+    }"
     @pointerdown="handleWidgetPointerEvent"
     @pointermove="handleWidgetPointerEvent"
     @pointerup="handleWidgetPointerEvent"
@@ -22,11 +25,9 @@
     >
       <div
         v-if="!widget.simplified.options?.hidden"
-        :data-is-hidden="`hidden: ${widget.simplified.options?.hidden}`"
-        class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch has-[.widget-expands]:flex-1"
+        class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch"
       >
         <!-- Widget Input Slot Dot -->
-
         <div
           :class="
             cn(
@@ -66,7 +67,7 @@
 
 <script setup lang="ts">
 import type { TooltipOptions } from 'primevue'
-import { computed, onErrorCaptured, ref } from 'vue'
+import { computed, onErrorCaptured, ref, toValue } from 'vue'
 import type { Component } from 'vue'
 
 import type {
@@ -190,4 +191,29 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
   return result
 })
+
+// TODO: Derive from types in widgetRegistry
+const EXPANDING_TYPES = [
+  'textarea',
+  'TEXTAREA',
+  'multiline',
+  'customtext',
+  'markdown',
+  'MARKDOWN',
+  'progressText',
+  'load3D',
+  'LOAD_3D'
+] as const
+
+const gridTemplateRows = computed((): string => {
+  const widgets = toValue(processedWidgets)
+  return widgets
+    .filter((w) => !w.simplified.options?.hidden)
+    .map((w) =>
+      EXPANDING_TYPES.includes(w.type as (typeof EXPANDING_TYPES)[number])
+        ? 'auto'
+        : 'min-content'
+    )
+    .join(' ')
+})
 </script>

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="widget-expands widget-markdown relative w-full"
-    @dblclick="startEditing"
-  >
+  <div class="widget-markdown relative w-full" @dblclick="startEditing">
     <!-- Display mode: Rendered markdown -->
     <div
       class="comfy-markdown-content size-full min-h-[60px] overflow-y-auto rounded-lg text-sm"

src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue

@@ -1,21 +1,19 @@
 <template>
-  <div class="widget-expands relative">
-    <Textarea
-      v-model="modelValue"
-      v-bind="filteredProps"
-      :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
-      :placeholder="placeholder || widget.name || ''"
-      :aria-label="widget.name"
-      :readonly="widget.options?.read_only"
-      :disabled="widget.options?.read_only"
-      fluid
-      data-capture-wheel="true"
-      @pointerdown.capture.stop
-      @pointermove.capture.stop
-      @pointerup.capture.stop
-      @contextmenu.capture.stop
-    />
-  </div>
+  <Textarea
+    v-model="modelValue"
+    v-bind="filteredProps"
+    :class="cn(WidgetInputBaseClass, 'relative size-full text-xs resize-none')"
+    :placeholder="placeholder || widget.name || ''"
+    :aria-label="widget.name"
+    :readonly="widget.options?.read_only"
+    :disabled="widget.options?.read_only"
+    fluid
+    data-capture-wheel="true"
+    @pointerdown.capture.stop
+    @pointermove.capture.stop
+    @pointerup.capture.stop
+    @contextmenu.capture.stop
+  />
 </template>
 
 <script setup lang="ts">