Comfy-Org / Comfy-Org/ComfyUI_frontend
test: Add E2E coverage for search bar layout and autocomplete clipping fixes
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 702
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
This issue tracks adding E2E (Playwright) test coverage for the visual fixes introduced in #11713, which were deferred because each case was impractical to cover at the time of the PR.
## Background
PR #11713 fixed three visual bugs in the Desktop app at small window sizes:
1. **`SearchAutocomplete` portal fix** – `ComboboxContent` is now wrapped in `ComboboxPortal` so the suggestions dropdown teleports to ``, escaping `overflow-hidden` ancestors and avoiding z-index clipping in the Manager dialog and other modals.
2. **`BaseModalLayout` header shrink** – Replaced `shrink-0` with `min-w-0` on the header content container so the search bar can shrink at narrow window sizes.
3. **`GraphCanvas` app-drag region** – Moved the native drag (`app-drag`) div before a mutually exclusive `v-if` block so Desktop window dragging works when workflow tabs are positioned in the Sidebar.
## Why tests were deferred
- **`SearchAutocomplete` portal**: Verifying the teleport fix requires the Manager dialog with a real/mocked extension list. The existing Playwright suite does not cover that dialog flow; adding it would be a substantial effort.
- **`BaseModalLayout` header shrink**: A viewport-resize test would be fragile and would test CSS layout rather than application behaviour.
- **`GraphCanvas` app-drag**: Desktop/Electron-only. `-webkit-app-region: drag` cannot be exercised in headless Chromium.
Unit tests for `SearchAutocomplete` were added in #11713 to cover `ComboboxPortal` rendering, suggestion display, and item selection.
## Desired coverage
- [ ] E2E test: Open the Manager dialog (or a modal using `BaseModalLayout`) and verify the `SearchAutocomplete` dropdown is not clipped by `overflow-hidden` ancestors (i.e., suggestions appear in `` portal).
- [ ] E2E test: Resize the viewport to a narrow width and verify the search bar in `BaseModalLayout` shrinks correctly without overflowing.
## References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11713
- Requested by: @kaili-yang
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11714-test-Add-E2E-coverage-for-search-bar-layout-and-autocomplete-clipping-fixes-3506d73d365081a8ae21e66a04042615) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.