Fix drag handle overlapping field input border in Forms builder

[builder-io-integration]

Summary

Fixes the field-row drag handle in the Forms builder so it no longer visually overlaps the field input's left border, and adds a regression test to prevent it from recurring.

Problem

In the Forms builder editor (beta.forms.agent-native.com/forms/{id}?tab=edit), the 6-dot drag-handle icon used to reorder fields overlapped the border of the field's text input box below it. This was visible across multiple field types (Full Name, Email, radio/choice, Check-in Date, Room Type), since they all share the same field-row layout.

Factory item: 256067558dc54c1537235109d5ac3bb2f07265afa9be5d8ccda73117076dcc6c
Source Slack thread: https://slack.com/app_redirect?team=T0GCV21GE&channel=C0ATH3CCZT4&message_ts=1789448657.355749

Solution

The drag handle is absolutely positioned inside the row's negative-margin gutter (sm:-mx-4 / sm:px-4, i.e. 16px). The handle's -start-5 offset combined with its size-10 (40px) width caused its right edge to extend past the gutter and bleed across the input's left border. Increasing the negative offset to -start-8 shifts the handle further outside the row so its right edge clears the gutter before the input begins, restoring a visible gap.

This fix is applied at the shared field-row wrapper level in FormBuilderPage.tsx, so it applies uniformly to all field types that use this row layout, not just Full Name.

Before: handle right edge extended past the 16px gutter, crossing into the input's border.
After: handle right edge sits within the gutter with at least a 4px gap before the input border.

Key Changes

• Changed the drag handle's absolute positioning offset from -start-5 to -start-8 in FormBuilderPage.tsx to keep it within the row's padding gutter.
• Added an explanatory comment documenting the gutter width, handle size, and why the offset must clear it.
• Added FormBuilderPage.drag-handle.test.ts, a regression test that parses the source for the row's sm:px-N padding and the handle's -start-N / size-N classes, then asserts the handle's computed right edge stays within the gutter with a minimum 4px gap from the input border.

---

  

---

To clone this PR locally use the Github CLI with command gh pr checkout 5032

You can tag me at @BuilderIO for anything you want me to fix or change

[builder-io-integration]

Builder reviewed your changes and has a few items to flag 🟡

Review Details

Code Review Summary

PR #5032 makes a focused Forms builder UI adjustment: it changes the shared field-row drag handle from -start-5 to -start-8 and adds a source-level arithmetic regression test. Applying the change at the shared wrapper correctly targets all field types, and the test is lightweight and runs without requiring browser setup. This is a low-risk UI change, but the responsive positioning needs another look before approval.

Key Findings

• 🟡 MEDIUM: At sm widths, the 40px handle is positioned 32px to the left of the row while the row is flush with the scroll container, so the visible grip can be clipped or disappear on tablet/narrow desktop layouts.
• 🟡 MEDIUM: The regression assertion checks the handle box rather than the actual centered grip icon and does not model the scroll-container boundary, so it passes while the user-visible handle may be offscreen.
• LOW: The test extracts the first sm:px-N in the entire source rather than binding to the draggable row's padding, weakening its protection against future gutter changes.

The shared-wrapper scope and explanatory geometry comment are good implementation choices. 🧪 Browser testing: Will run after this review (PR touches UI code)