mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-21 15:24:09 +00:00
0792d26f77
## Summary Fix confirm dialog buttons becoming unreachable on mobile when text contains long unbreakable words (e.g. content-hashed filenames with 100+ characters). <img width="1080" height="2277" alt="image" src="https://github.com/user-attachments/assets/2f42afc9-c8ec-42aa-89d5-802dbaf788fd" /> ## Changes - **What**: Added `overflow-wrap: break-word` and `flex-wrap` to both confirm dialog systems so long words break properly and buttons wrap on narrow screens. - `ConfirmationDialogContent.vue`: Added `overflow-wrap: break-word` to the existing scoped style and `flex-wrap` to button row. - `ConfirmBody.vue`: Added `break-words` tailwind class. - `ConfirmFooter.vue`: Added `flex-wrap` to button section. ## Review Focus Minimal CSS-only fix across both dialog systems (legacy `dialogService.confirm()` and newer `showConfirmDialog()`). No behavioral changes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8746-fix-prevent-confirm-dialog-buttons-from-being-unreachable-on-mobile-with-long-text-3016d73d36508116bf55f0dc5cd89d0b) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
|
|
|
|
test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
|
|
test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
|
|
comfyPage
|
|
}) => {
|
|
const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
|
|
|
|
await comfyPage.page.evaluate((msg) => {
|
|
window
|
|
.app!.extensionManager.dialog.confirm({
|
|
title: 'Confirm',
|
|
type: 'default',
|
|
message: msg
|
|
})
|
|
.catch(() => {})
|
|
}, longFilename)
|
|
|
|
const dialog = comfyPage.page.getByRole('dialog')
|
|
await expect(dialog).toBeVisible()
|
|
|
|
const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
|
|
await expect(confirmButton).toBeVisible()
|
|
await expect(confirmButton).toBeInViewport()
|
|
|
|
const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
|
|
await expect(cancelButton).toBeVisible()
|
|
await expect(cancelButton).toBeInViewport()
|
|
})
|
|
})
|