style: Add minimum height for some widgets

Author: DrJKL

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { provide } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
-import { getComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import {
+  getComponent,
+  shouldExpand
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 
@@ -58,7 +62,7 @@ function onWidgetValueChange(
           :model-value="widget.value"
           :node-id="String(node.id)"
           :node-type="node.type"
-          class="col-span-1"
+          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
           @update:model-value="
             (value: string | number | boolean | object) =>
               onWidgetValueChange(widget, value)

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

@@ -83,6 +83,7 @@ import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetD
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
 import {
   getComponent,
+  shouldExpand,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
@@ -192,28 +193,11 @@ 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'
-    )
+    .map((w) => (shouldExpand(w.type) ? 'auto' : 'min-content'))
     .join(' ')
 })
 </script>

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -197,3 +197,19 @@ export const isEssential = (type: string): boolean => {
 export const shouldRenderAsVue = (widget: Partial<SafeWidgetData>): boolean => {
   return !widget.options?.canvasOnly && !!widget.type
 }
+
+const EXPANDING_TYPES = [
+  'textarea',
+  'TEXTAREA',
+  'multiline',
+  'customtext',
+  'markdown',
+  'MARKDOWN',
+  'progressText',
+  'load3D',
+  'LOAD_3D'
+] as const
+
+export function shouldExpand(type: string): boolean {
+  return EXPANDING_TYPES.includes(type as (typeof EXPANDING_TYPES)[number])
+}