test: add failing test for shared workflow dialog long name overflow (FE-828)

browser_tests/tests/dialogs/openSharedWorkflowDialog.spec.ts

@@ -0,0 +1,68 @@
+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)
+  })
+})