mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-06-06 15:54:45 +00:00
3a8ddfb6f1
## Summary The "Open shared workflow" dialog rendered the workflow name in an `<h2>` with no wrapping control. A long, space-free name (e.g. a content-hash filename) is a single unbreakable "word", so with the default `overflow-wrap: normal` it could not wrap. It overflowed its box and, because PrimeVue's `.p-dialog-content` is `overflow-x: auto`, the dialog scrolled horizontally instead of wrapping. CDP measurement on the unfixed build (96-char name): dialog content `scrollWidth 1336` vs `clientWidth 702` -> horizontal scroll. After adding `wrap-anywhere` to the heading: `scrollWidth 702 == clientWidth 702`, name wraps to multiple lines, full name still in the DOM. ### before <img width="704" height="295" alt="before-dialog" src="https://github.com/user-attachments/assets/ea05ab32-a80d-4210-951c-f43d595bd6eb" /> ### after <img width="704" height="359" alt="after-dialog" src="https://github.com/user-attachments/assets/cbf3019e-5e71-4dba-a1fd-ea3586dd995a" /> ## Changes - `OpenSharedWorkflowDialogContent.vue`: add `wrap-anywhere` to the workflow-name `<h2>` so a long unbreakable name wraps within the dialog bounds instead of forcing horizontal scroll. The parent already has `min-w-0`. - Breaking: none ## Red-Green Verification | Commit | CI | Purpose | |--------|-----|---------| | [`test:`d9158d1](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/26678596015) | 🔴 Red (failure) | Proves the test catches the bug — cloud e2e failed at `expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1)`: received 1332, expected <= 703 | | [`fix:`08e75a1](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/26678974321) | 🟢 Green (success) | Proves the fix resolves it | Fixes FE-828 ## Test Plan - [x] CI red on test-only commit - [x] CI green on fix commit - [x] E2E regression `browser_tests/tests/dialogs/openSharedWorkflowDialog.spec.ts` (@cloud): mocks a long-named shared workflow, asserts the dialog does not overflow horizontally - [x] Manual CDP verification (before/after above)
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
import type { Page } from '@playwright/test'
|
|
import type { z } from 'zod'
|
|
|
|
import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
|
|
import { TestIds } from '@e2e/fixtures/selectors'
|
|
import type { zSharedWorkflowResponse } from '@/platform/workflow/sharing/schemas/shareSchemas'
|
|
|
|
type SharedWorkflowResponse = z.input<typeof zSharedWorkflowResponse>
|
|
|
|
const shareId = 'fe828-long-name'
|
|
|
|
// Unbroken, space-free name (mimics a content-hash workflow name) that cannot
|
|
// wrap at whitespace and previously forced the dialog to scroll horizontally.
|
|
const longWorkflowName =
|
|
'c23df0133afe9cf61a9c0e3b1f5d8a7e6429bd14f0a3c8e2d9b7165430fedcba99887766554433221100ffeeddccbbaa'
|
|
|
|
const longNameWorkflowResponse: SharedWorkflowResponse = {
|
|
share_id: shareId,
|
|
workflow_id: 'fe828-long-name-workflow',
|
|
name: longWorkflowName,
|
|
listed: true,
|
|
publish_time: '2026-05-01T00:00:00Z',
|
|
workflow_json: {
|
|
version: 0.4,
|
|
last_node_id: 0,
|
|
last_link_id: 0,
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
assets: []
|
|
}
|
|
|
|
async function mockLongNameSharedWorkflow(page: Page): Promise<void> {
|
|
await page.route(`**/workflows/published/${shareId}`, async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(longNameWorkflowResponse)
|
|
})
|
|
})
|
|
}
|
|
|
|
const test = comfyPageFixture
|
|
|
|
test.describe('Open shared workflow dialog', { tag: '@cloud' }, () => {
|
|
test('wraps a long workflow name instead of scrolling horizontally', async ({
|
|
comfyPage
|
|
}) => {
|
|
const { page } = comfyPage
|
|
await mockLongNameSharedWorkflow(page)
|
|
await comfyPage.setup({ clearStorage: false, url: `/?share=${shareId}` })
|
|
|
|
const dialog = page.getByTestId(TestIds.dialogs.openSharedWorkflow)
|
|
await expect(
|
|
dialog.getByTestId(TestIds.dialogs.openSharedWorkflowTitle)
|
|
).toBeVisible()
|
|
|
|
const heading = dialog.locator('main h2')
|
|
await expect(heading).toHaveText(longWorkflowName)
|
|
|
|
const { scrollWidth, clientWidth } = await dialog.evaluate((el) => ({
|
|
scrollWidth: el.scrollWidth,
|
|
clientWidth: el.clientWidth
|
|
}))
|
|
expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1)
|
|
})
|
|
})
|