Merged
Size
S
Change Breakdown
Bug Fix55%
Refactor25%
Feature15%
Testing5%
#27821fix(editor): AI builder setup wizard positioning and popover collision

AI builder wizard UI polished with smarter scrolling and popovers

Setup wizard card switching now scrolls the chat automatically so footers stay visible. Popover dropdowns flip before hitting viewport edges, and padding only appears when the rating overlay is shown.

The AI builder setup wizard had several rough edges that made it feel unresponsive. When switching between cards of different heights, the chat wouldn't scroll to keep the wizard footer in view. Popover dropdowns would clip against overflow boundaries instead of flipping to a visible position. And the messages container always added bottom padding, even when the rating overlay wasn't present.

The wizard now auto-scrolls when navigating between cards of different heights. The scroll trigger uses requestAnimationFrame to ensure the new card has been laid out before reading scrollHeight. A Vue provide/inject pattern wires the chat component's scrollToBottom method to the wizard without tight coupling.

Popovers gained a collisionPadding prop defaulting to 5px. Dropdowns now flip upward before clipping against overflow boundaries. The messages container only applies extra bottom padding when the rating overlay is shown.

The fixes span the design system's chat and popover components, plus the editor UI's wizard and agent components. The provide/inject refactor makes the chat-to-wizard relationship cleaner and more maintainable going forward.

View Original GitHub Description

Summary

  • Auto-scroll chat to bottom when navigating between wizard cards of different heights, keeping the card footer visible
  • Only apply bottom padding on messages container when the rating overlay is shown (avoids unnecessary spacing)
  • Add collisionPadding prop to N8nPopover (default 5px) so dropdowns flip before clipping overflow boundaries
  • Expose scrollToBottom from N8nAskAssistantChat and provide it via inject to the wizard

before:

https://github.com/user-attachments/assets/3aef1885-d155-4cb6-a2d1-91664212305e

after:

https://github.com/user-attachments/assets/0b865b52-1195-4370-b719-22e3b0b91163

https://www.notion.so/n8n/Z-index-The-dropdown-of-the-Resource-Locator-appears-behing-theehind-the-thumbs-up-down-icons-3335b6e0c94f80d7bc4df7adc786182b?source=copy_link

https://www.notion.so/n8n/Keep-the-setup-fixed-to-the-bottom-of-the-chat-when-resizing-32f5b6e0c94f8016b8e5d656826689bb?v=31e5b6e0c94f8171b1a7000c71d5169b&source=copy_link

Test plan

  • Use the "Invoice processing" suggested workflow on the empty builder state to create test workflow. May explicitly ask for google sheets node

🤖 Generated with Claude Code

© 2026 · via Gitpulse