improvement(ui): hide divider when following subblock value is null

[waleedlatif1]

Summary

• hide divider when following subblock value is null
• closed gap in mcp dynamic args subblock

Type of Change

• New feature

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 27, 2025 11:08pm

[greptile-apps]

Greptile Summary

Improved UI by conditionally hiding dividers between subblocks when the following subblock renders empty content (e.g., schedule-info without data). Fixed spacing gap in MCP dynamic args by wrapping parameter inputs in a nested container.

Key changes:

• Added CSS rules using :has() selector to detect empty .subblock-content elements and hide associated dividers
• Fixed MCP dynamic args spacing by moving space-y-4 from outer container to inner wrapper around parameters
• Added semantic CSS classes (subblock-row, subblock-divider, subblock-content) to enable selector targeting

Issues found:

• Violates custom instruction to avoid editing globals.css - the CSS rules should be moved to a local component file instead

Confidence Score: 4/5

• Safe to merge with minor style guideline violation
• The implementation is logically sound and fixes legitimate UI issues. The CSS :has() selector correctly targets empty subblocks, and the spacing fix in mcp-dynamic-args is clean. However, violates project convention against editing globals.css - these styles should be in a local component file per custom instructions
• Consider moving CSS rules from globals.css to a local component file per project conventions

Important Files Changed

Filename	Overview
apps/sim/app/_styles/globals.css	Added CSS rules to hide dividers when adjacent subblocks are empty using :has() selector, violates custom instruction to avoid editing globals.css
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx	Wrapped parameter inputs in nested div to fix spacing gap issue, preserving original space-y-4 spacing for inputs only
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx	Added subblock-content class to enable CSS-based empty detection for divider hiding logic
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx	Added subblock-row and subblock-divider classes to enable CSS selector targeting for conditional divider visibility

Sequence Diagram

sequenceDiagram
    participant Editor
    participant SubBlock
    participant ScheduleInfo
    participant CSS

    Editor->>Editor: Render subblock rows
    Editor->>Editor: Add .subblock-row class
    Editor->>SubBlock: Render SubBlock component
    SubBlock->>SubBlock: Add .subblock-content class
    SubBlock->>SubBlock: Call renderLabel()
    alt No title or switch type
        SubBlock->>SubBlock: renderLabel() returns null
    else Has title
        SubBlock->>SubBlock: renderLabel() returns JSX
    end
    SubBlock->>SubBlock: Call renderInput()
    alt schedule-info type
        SubBlock->>ScheduleInfo: Render ScheduleInfo
        alt No schedule data
            ScheduleInfo->>SubBlock: Return null
            SubBlock->>SubBlock: renderInput() returns null
        else Has schedule data
            ScheduleInfo->>SubBlock: Return JSX
            SubBlock->>SubBlock: renderInput() returns JSX
        end
    else Other input types
        SubBlock->>SubBlock: renderInput() returns JSX
    end
    SubBlock->>Editor: Return rendered content
    Editor->>Editor: Render .subblock-divider between rows
    CSS->>CSS: Evaluate :has() selector
    alt .subblock-content is empty
        CSS->>CSS: Hide .subblock-divider
    else .subblock-content has children
        CSS->>CSS: Show .subblock-divider
    end

Loading

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}