fix(ui): prevent iterator input field overlapping when content is long

[NJX-njx]

Summary

Fix overlapping of input fields in the iterator when content is too long.

Problem

When the input in the iterator is too long, it overlaps with adjacent elements (as noted in instill-ai/instill-core#503).

Solution

• IteratorInput Select.Trigger: use min-w-[300px] and flex-1 to allow expansion
• OutputValueInput: use min-w-[250px] and flex-1 instead of fixed width
• OutputSet row: add flex-wrap and flex-1 for the input container
• Ensures fields expand automatically or wrap when content is long

Fixes instill-ai/instill-core#503

Made with Cursor

[Copilot]

Pull request overview

Adjusts iterator editor layout styles to prevent long iterator input/output values from overlapping adjacent UI elements in the pipeline builder.

Changes:

• Make iterator input Select.Trigger flexible with a larger minimum width.
• Make iterator output value input flexible (min-width + flex-1) instead of fixed width.
• Update iterator output row layout to support wrapping and flexible sizing.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/toolkit/src/view/pipeline-builder/components/iterator-editor/iterator-output/OutputValueInput.tsx	Makes the output value input expand/shrink via min-w + flex-1.
packages/toolkit/src/view/pipeline-builder/components/iterator-editor/iterator-output/IteratorOutput.tsx	Enables wrapping and flex sizing in the output row to reduce collisions.
packages/toolkit/src/view/pipeline-builder/components/iterator-editor/iterator-input/IteratorInput.tsx	Updates the iterator input select trigger/container to be flexible and less likely to overlap.

Comments suppressed due to low confidence (1)

packages/toolkit/src/view/pipeline-builder/components/iterator-editor/iterator-input/IteratorInput.tsx:129

• Select.Trigger renders a long, unspaced reference string ("${...}") inside a plain <p> without any overflow handling. For sufficiently long paths (especially those without natural break opportunities), the text can still overflow outside the trigger and overlap adjacent UI even after switching to flex-1. Consider adding explicit overflow behavior (e.g., min-w-0 + overflow-hidden + truncation, or break-all) on the trigger/value content so long references are contained within the field.

          <Select.Trigger className="!min-w-[300px] !flex-1">
            <Select.Value aria-label={selectedInputOption?.path}>
              {selectedInputOption ? (
                <p className="rounded bg-semantic-accent-bg px-2 py-0.5 text-semantic-accent-default product-body-text-4-medium">
                  {"$" + `{${selectedInputOption?.path}}`}
                </p>
              ) : null}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

flex-wrap is enabled on this row but only gap-x-3 is set. When wrapping occurs, the second line will have no vertical spacing and can look cramped (or appear like elements are colliding). Consider adding a gap-y-* (or switching to gap-*) to provide consistent spacing when items wrap (similar to other flex-wrap rows in the codebase).