fix(custom-tool): restore modal body scroll so Save stays reachable (#5321)

* fix(custom-tool): restore modal body scroll so Save stays reachable

The Edit/Create Agent Tool modal clipped its footer (Save/Update) and could not scroll with long code or schema content.

Root cause: #4354 migrated the modal to ChipModal and changed the body from a scroll region (flex-1 overflow-y-auto) to flex-none overflow-visible so the hand-positioned EnvVar/Tag autocompletes could spill past it. That removed the scroll region, so tall content grew the body past the modal's max-h-[84vh] cap and the overflow-hidden surface clipped the footer.

Restore ChipModalBody as the scroll region (its documented behavior) and switch the EnvVar/Tag dropdowns to portaled inputRef caret-anchoring, matching the canonical Function-block editor, so they anchor to the caret in a portal and are never clipped by the scroll boundary.

* fix(custom-tool): keep dropdown anchors content-relative on body scroll

Review follow-up. The autocomplete popovers already portal their menus (never clipped by the body's scroll boundary), so the fix is only to restore the body as the scroll region. Reverting the dropdowns to their content-relative absolute anchors keeps them glued to the caret while the body scrolls; the caret-viewport inputRef anchoring used fixed viewport coordinates that only refreshed on edits, detaching the menu on scroll.
This commit is contained in:
Waleed
2026-07-01 10:59:22 -07:00
committed by GitHub
parent 33f9d645ba
commit 0575875be1
@@ -832,12 +832,14 @@ try {
</ChipModalHeader>
{/*
flex-none + overflow-visible opt this body out of the chrome's
scroll container: the caret-anchored EnvVar/Tag autocomplete
dropdowns are absolute-positioned inside it and must spill past
the body's bounds rather than clip against a scroll boundary.
The body is the scroll region so tall schema/code content stays inside
the modal and the footer (Next/Save) is always reachable. The EnvVar,
Tag, and schema-param autocompletes render their menus in portaled
popovers (never clipped by this scroll boundary) and anchor to a
caret-positioned element inside the editor wrapper, so the menus track
the caret as the body scrolls.
*/}
<ChipModalBody className='flex-none gap-2 overflow-visible px-4'>
<ChipModalBody className='gap-2 px-4'>
<ChipModalTabs
tabs={[
{ value: 'schema', label: 'Schema' },