fix: hide label of textarea in right side panel + align switch to the left (#8279)

<img width="350" alt="image"
src="https://github.com/user-attachments/assets/3ff3f83c-163b-44df-8b68-7fe18c3266c4"
/>
 | 
<img width="350" alt="CleanShot 2026-01-23 at 21 25 04@2x"
src="https://github.com/user-attachments/assets/c2c630f3-6990-4a55-aa8f-a19297ffee52"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8279-fix-hide-label-of-textarea-in-right-side-panel-align-switch-to-the-left-2f16d73d365081e9b932fb2be873b660)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -14,6 +14,8 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
+
 import { GetNodeParentGroupKey } from '../shared'
 import WidgetItem from './WidgetItem.vue'
 
@@ -52,7 +54,7 @@ const rootElement = ref<HTMLElement>()
 const widgets = shallowRef(widgetsProp)
 watchEffect(() => (widgets.value = widgetsProp))
 
-provide('hideLayoutField', true)
+provide(HideLayoutFieldKey, true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()

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

@@ -1,6 +1,7 @@
 <template>
   <FloatLabel
     variant="in"
+    :unstyled="hideLayoutField"
     :class="
       cn(
         'rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
@@ -23,7 +24,7 @@
       @pointerup.capture.stop
       @contextmenu.capture.stop
     />
-    <label :for="id">{{ displayName }}</label>
+    <label v-if="!hideLayoutField" :for="id">{{ displayName }}</label>
   </FloatLabel>
 </template>
 
@@ -33,6 +34,7 @@ import Textarea from 'primevue/textarea'
 import { computed, useId } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 import {
   INPUT_EXCLUDED_PROPS,
@@ -48,6 +50,8 @@ const { widget, placeholder = '' } = defineProps<{
 
 const modelValue = defineModel<string>({ default: '' })
 
+const hideLayoutField = useHideLayoutField()
+
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
 )

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

@@ -1,6 +1,10 @@
 <template>
   <WidgetLayoutField :widget>
-    <div class="ml-auto flex w-fit items-center gap-2">
+    <div
+      :class="
+        cn('flex w-fit items-center gap-2', !hideLayoutField && 'ml-auto')
+      "
+    >
       <span
         v-if="stateLabel"
         :class="
@@ -29,6 +33,7 @@ import { computed } from 'vue'
 
 import type { IWidgetOptions } from '@/lib/litegraph/src/types/widgets'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 import {
   STANDARD_EXCLUDED_PROPS,
@@ -43,6 +48,8 @@ const { widget } = defineProps<{
 
 const modelValue = defineModel<boolean>()
 
+const hideLayoutField = useHideLayoutField()
+
 const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { useHideLayoutField } from '@/types/widgetTypes'
 import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
@@ -11,7 +10,7 @@ defineProps<{
   >
 }>()
 
-const hideLayoutField = inject<boolean>('hideLayoutField', false)
+const hideLayoutField = useHideLayoutField()
 </script>
 
 <template>

src/types/widgetTypes.ts

@@ -1,5 +1,11 @@
+import { inject } from 'vue'
 import type { InjectionKey } from 'vue'
 
 export type AssetKind = 'image' | 'video' | 'audio' | 'model' | 'unknown'
 
 export const OnCloseKey: InjectionKey<() => void> = Symbol()
+
+export const HideLayoutFieldKey: InjectionKey<boolean> = Symbol()
+export function useHideLayoutField(): boolean {
+  return inject(HideLayoutFieldKey, false)
+}