fix(apollo-react): handles in flow [MST-6514]

[ayush578]

add button was hidden due to text label for handles.
limitize the text length when add button needs to be shown

Screen.Recording.2026-02-18.at.2.24.22.PM.mov

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-canvas	🟢 Ready	Preview, Logs	Feb 18, 2026, 10:01:10 PM
apollo-ui-react	🟢 Ready	Preview, Logs	Feb 18, 2026, 10:00:39 PM
apollo-vertex	🟢 Ready	Preview, Logs	Feb 18, 2026, 10:01:25 PM
apollo-wind	🟢 Ready	Preview, Logs	Feb 18, 2026, 10:01:14 PM

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[Copilot]

Pull request overview

This PR fixes a visual issue where the "add" button in canvas flow handles was being hidden due to overlapping text labels. The fix adds conditional text truncation for handle labels when they appear alongside buttons on horizontal positions (Left/Right).

Changes:

• Added logic to truncate handle labels when a button needs to be displayed alongside them
• Label truncation only applies to source handles with buttons on horizontal positions (Left/Right)
• Implemented using a max-width constraint (50px) and CSS text-overflow ellipsis

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.tsx	Added shouldTruncateLabel logic and conditional styling to truncate text when button is shown on horizontal positions
packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.styles.tsx	Added $shouldTruncate prop to StyledLabel that applies max-width and overflow styles when enabled

Comments suppressed due to low confidence (1)

packages/apollo-react/src/canvas/components/ButtonHandle/ButtonHandle.tsx:194

• When text is truncated, a tooltip should be added to display the full label text. This follows the pattern used in other canvas components like Breadcrumb (Breadcrumb.tsx:76) which uses ApTooltip with the smartTooltip prop to show tooltips only when text is actually truncated. Without a tooltip, users cannot see the full label text when it's truncated.

      {label && (
        <StyledLabel
          $position={position}
          $backgroundColor={labelBackgroundColor}
          $shouldTruncate={shouldTruncateLabel}
        >
          <Row align="center" gap={4}>
            {labelIcon}
            <ApTypography
              color="var(--uix-canvas-foreground-de-emp)"
              variant={FontVariantToken.fontSizeSBold}
              sx={
                shouldTruncateLabel
                  ? {
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }
                  : undefined
              }
            >
              {label}
            </ApTypography>
          </Row>
        </StyledLabel>
      )}

[KodudulaAshishUiPath]

I think It would be better if we show the complete text in tooltip when the label is truncated