Merge branch 'main' into fix/label-overlap

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/10034#discussion_r2950842585

browser_tests/tests/vueNodes/widgets/text/textareaLabelOverlap.spec.ts

@@ -0,0 +1,44 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+
+test.describe('Textarea label overlap', { tag: ['@widget'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const getFirstClipNode = (comfyPage: ComfyPage) =>
+    comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
+
+  const getTextarea = (comfyPage: ComfyPage) =>
+    getFirstClipNode(comfyPage).getByRole('textbox', { name: 'text' })
+
+  test('label should have a background color to prevent text showing through when scrolled', async ({
+    comfyPage
+  }) => {
+    const textarea = getTextarea(comfyPage)
+
+    // Fill with enough lines to cause scrollable content
+    const manyLines = Array.from(
+      { length: 20 },
+      (_, i) => `Line ${i + 1}`
+    ).join('\n')
+    await textarea.fill(manyLines)
+
+    // The label associated with this textarea must have a non-transparent
+    // background so scrolled text does not show through it.
+    const bgColor = await textarea.evaluate((el) => {
+      const label = (el as HTMLTextAreaElement).labels?.[0]
+      return label ? getComputedStyle(label).backgroundColor : ''
+    })
+
+    // 'transparent' or 'rgba(0, 0, 0, 0)' means no background — the bug.
+    expect(
+      bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)',
+      `Expected label to have a solid background color, but got "${bgColor}"`
+    ).toBe(true)
+  })
+})

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

@@ -10,7 +10,7 @@
     <label
       v-if="!hideLayoutField"
       :for="id"
-      class="pointer-events-none absolute top-1.5 left-3 z-10 text-xxs text-muted-foreground"
+      class="pointer-events-none absolute inset-x-0 top-0 z-10 rounded-t-lg bg-component-node-widget-background px-3 pt-1.5 pb-0.5 text-xxs text-muted-foreground"
     >
       {{ displayName }}
     </label>