Compare commits
8 Commits
codex/cove
...
fix/label-
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
f63c429a60 | [automated] Update test expectations | ||
|
|
45726c51c5 | [automated] Update test expectations | ||
|
|
49349242a3 |
test: use expect.poll for retrying assertion and fix imports
Address review feedback: - Use expect.poll for async rendering robustness - Fix imports to use @e2e/ alias Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> |
||
|
|
11f8c163fe |
fix: use inset-x-0 instead of top-0 left-0 w-full for label positioning
Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10034#discussion_r2950842585 |
||
|
|
f033460d7f | fix: use textarea.labels for deterministic label lookup in test | ||
|
|
17df6afa25 | [automated] Apply ESLint and Oxfmt fixes | ||
|
|
ab8ee08e4a |
fix: add background to textarea label to prevent text overlap on scroll
Give the textarea label a solid background color, full width, and rounded top corners so that scrolled text content is masked behind the label instead of showing through it. |
||
|
|
48b76bbd66 |
test: add failing test for textarea label overlap on scroll
The label in WidgetTextarea lacks a background color, causing scrolled text content to show through the label. This test verifies the label has a solid background to prevent this overlap. |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
|
@@ -0,0 +1,43 @@
|
|||
import {
|
||||
comfyExpect as expect,
|
||||
comfyPageFixture as test
|
||||
} from '@e2e/fixtures/ComfyPage'
|
||||
import type { ComfyPage } from '@e2e/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.
|
||||
// Use expect.poll for retrying assertion in case of async rendering.
|
||||
await expect
|
||||
.poll(() =>
|
||||
textarea.evaluate((el) => {
|
||||
const label = (el as HTMLTextAreaElement).labels?.[0]
|
||||
return label ? getComputedStyle(label).backgroundColor : ''
|
||||
})
|
||||
)
|
||||
.not.toMatch(/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/)
|
||||
})
|
||||
})
|
||||
|
|
@@ -10,7 +10,7 @@
|
|||
<label
|
||||
v-if="!hideLayoutField"
|
||||
:for="id"
|
||||
class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs 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-2xs text-muted-foreground"
|
||||
>
|
||||
{{ displayName }}
|
||||
</label>
|
||||
|
|
|
|||