fix(ui): render block handles underneath current block content

[waleedlatif1]

Summary

• Lower handle z-index so connection handles render underneath the active block's content
• Handles are still visible and interactive since they extend outside block bounds

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

You have used all Bugbot PR reviews included in your free trial for your GitHub account on this workspace.

To continue using Bugbot reviews, enable Bugbot for your team in the Cursor dashboard.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 16, 2026 10:08pm

[greptile-apps]

Greptile Summary

This PR makes a focused, single-line bug fix that lowers the z-index of ReactFlow Handle components from !z-[10] to !z-[0] within the getHandleClasses utility in workflow-block.tsx. This ensures connection handles render underneath the active block's content (header elements carry z-10 within the same stacking context rooted at z-[20]), preventing handles from visually overlapping interactive block UI like titles, badges, and dropdowns.

Key points:

• The fix is minimal and isolated to one line, with no logic or behavior changes beyond z-index layering.
• Handles remain fully interactive because they are positioned outside the block's bounding box via negative offsets (!left-[-8px], !right-[-8px], etc.), so only the portion that would have overlapped block content is affected.
• The previous thread flagged !z-[-1] as fragile (handles could disappear behind the parent background); !z-[0] is the safer landing point that was adopted here.
• No tests were added, which is acceptable for a pure visual/CSS fix that is verified manually.

Confidence Score: 5/5

• This PR is safe to merge — it is a single-line CSS z-index adjustment with no logic or API changes.
• The change is minimal (one value changed in one line), well-reasoned in the PR description, and aligns with the previous review discussion that already landed on !z-[0] as the correct value. The handles' functional interactivity is preserved because they extend outside the block bounds via negative offsets, so lowering the z-index only affects the visual layering within the block, not pointer-event targeting outside it.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	Single-line change lowering handle z-index from !z-[10] to !z-[0] so connection handles render underneath active block content (header elements at z-10). Handles remain visible/interactive since they're offset outside block bounds.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["group relative (no z-index)"]
    A --> B["workflow-drag-handle\nrelative z-[20]\n(stacking context root)"]
    B --> C["Handle components\n!z-[0] (AFTER FIX, was !z-[10])\noffset outside block bounds"]
    B --> D["Header left section\nrelative z-10\n(block title, icon)"]
    B --> E["Header right section\nrelative z-10\n(badges, status)"]
    B --> F["Sub-block content rows\n(no explicit z-index)"]

    style C fill:#f0f4ff,stroke:#4a6cf7
    style D fill:#f0fff4,stroke:#38a169
    style E fill:#f0fff4,stroke:#38a169

    C -. "visually underneath\nblock content" .-> D
    C -. "extends outside\nblock bounds" .-> G["Interactive handle\n(clickable outside block)"]

Loading

_{Last reviewed commit: 090d0e7}

[waleedlatif1]

@greptile