fix(subflow): updated subflow border to match block border

[waleedlatif1]

Summary

• updated subflow border to match block border

Type of Change

• Bug fix

Testing

N/A

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 11, 2026 1:40am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR updates subflow borders to use --border-1 instead of --border to match the styling of workflow blocks. This is a good change that improves visual consistency.

Changes Made

• Updated main subflow container border from --border to --border-1 in both editor and preview components
• Updated the internal "Start" element border from --border to --border-1

What This Achieves

In light mode, --border and --border-1 both resolve to #e0e0e0, so there's no visual difference. In dark mode, --border-1 is #3d3d3d (lighter) compared to --border at #2c2c2c (darker), making the subflow borders match the workflow block borders for a more cohesive UI.

Incomplete Update

The header divider border (border-b) was not updated and still uses --border. In workflow-block.tsx, the equivalent header border uses --border-1. This creates a subtle inconsistency in dark mode where the header divider will appear darker than the outer border. While minor, completing this update would ensure full visual consistency.

Confidence Score: 4/5

• This PR is safe to merge with minor visual inconsistency in dark mode
• The changes correctly update subflow borders to match workflow block styling. The code changes are minimal and focused. However, the header border was not updated, creating a subtle visual inconsistency in dark mode. This is a style issue rather than a functional bug, so the PR is still safe to merge.
• Both files have the same minor issue with header borders that should ideally be addressed for complete visual consistency

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx	3/5	Updated main subflow border and Start element border from --border to --border-1 to match workflow-block.tsx, but header border-b still uses --border creating visual inconsistency in dark mode
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx	3/5	Updated main subflow border and Start element border from --border to --border-1, but header border-b still uses --border creating the same inconsistency as in subflow-node.tsx

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant SubflowNode as SubflowNode Component
    participant PreviewSubflow as Preview Subflow
    participant CSS as CSS Variables
    
    Dev->>SubflowNode: Change border to --border-1
    SubflowNode->>CSS: Request --border-1 value
    CSS-->>SubflowNode: Light: #e0e0e0, Dark: #3d3d3d
    
    Dev->>PreviewSubflow: Change border to --border-1
    PreviewSubflow->>CSS: Request --border-1 value
    CSS-->>PreviewSubflow: Light: #e0e0e0, Dark: #3d3d3d
    
    Note over SubflowNode,PreviewSubflow: Header border still uses --border
    SubflowNode->>CSS: Request --border (header)
    CSS-->>SubflowNode: Light: #e0e0e0, Dark: #2c2c2c
    
    PreviewSubflow->>CSS: Request --border (header)
    CSS-->>PreviewSubflow: Light: #e0e0e0, Dark: #2c2c2c
    
    Note over SubflowNode,PreviewSubflow: Dark mode: Border mismatch<br/>(#3d3d3d vs #2c2c2c)

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
The header border-b uses border-[var(--border)] while the main container border now uses border-[var(--border-1)]. In dark mode, these have different values (#2c2c2c vs #3d3d3d), creating a visual inconsistency where the header border will appear lighter than the main border.

For consistency with workflow-block.tsx (line 990), this should also use --border-1:

              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
Line: 169:169

Comment:
The header border-b uses `border-[var(--border)]` while the main container border now uses `border-[var(--border-1)]`. In dark mode, these have different values (#2c2c2c vs #3d3d3d), creating a visual inconsistency where the header border will appear lighter than the main border.

For consistency with workflow-block.tsx (line 990), this should also use `--border-1`:

```suggestion
              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

---

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx
The header border-b uses border-[var(--border)] while the main container border now uses border-[var(--border-1)]. In dark mode, these have different values (#2c2c2c vs #3d3d3d), creating a visual inconsistency where the header border will appear lighter than the main border.

For consistency, this should also use --border-1:

      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'>

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx
Line: 66:66

Comment:
The header border-b uses `border-[var(--border)]` while the main container border now uses `border-[var(--border-1)]`. In dark mode, these have different values (#2c2c2c vs #3d3d3d), creating a visual inconsistency where the header border will appear lighter than the main border.

For consistency, this should also use `--border-1`:

```suggestion
      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'>
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.