fix(modals): fix z-index for various modals and output selector and variables

[waleedlatif1]

Summary

• fix z-index for various modals and output selector and variables

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 15, 2025 7:05am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes z-index layering issues for modals and popovers, and significantly refactors the output selector, input mapping, and variables input components with collapsible UI patterns and keyboard navigation.

Key Changes:

• Set Modal z-index to 10000100 and Popover z-index to 10000001 to ensure proper layering
• Added keyboard navigation (arrow keys, Enter, Escape) to OutputSelect component
• Refactored InputMapping and VariablesInput to use collapsible field UI with better spacing
• Replaced Select components with Combobox in VariablesInput for better UX
• Added automatic initialization and cleanup logic for variable assignments
• Improved layout and overflow handling in input fields

Issues Found:

• Missing dependency in useEffect hook for OutputSelect (line 312)

Confidence Score: 4/5

• This PR is mostly safe to merge with one minor dependency array fix needed
• The z-index fixes are straightforward and safe. The UI refactors are substantial but well-structured. However, there's a missing dependency in the useEffect that should be addressed to prevent potential stale closure bugs
• Pay attention to output-select.tsx - fix the missing dependency in the useEffect on line 312

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/components/emcn/components/modal/modal.tsx	5/5	Set z-index to 10000100 for modal overlay and content to layer above Dialog component
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx	4/5	Added keyboard navigation, highlighting, and removed PopoverScrollArea; has missing dependency in useEffect
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx	5/5	Refactored to collapsible field UI, removed unused subBlockId prop, improved layout and scrolling
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/variables-input/variables-input.tsx	5/5	Refactored to collapsible UI with Combobox, added automatic cleanup and initialization logic for assignments

Sequence Diagram

sequenceDiagram
    participant User
    participant Modal
    participant Popover
    participant OutputSelect
    participant InputMapping
    participant VariablesInput

    Note over Modal,Popover: Z-Index Configuration
    Modal->>Modal: Set z-index to 10000100
    Popover->>Popover: Set z-index to 10000001
    
    Note over User,OutputSelect: Output Selection Flow
    User->>OutputSelect: Opens output selector
    OutputSelect->>Popover: Render with align='end'
    User->>OutputSelect: Press ArrowDown/ArrowUp
    OutputSelect->>OutputSelect: Update highlightedIndex
    OutputSelect->>OutputSelect: Scroll item into view
    User->>OutputSelect: Press Enter
    OutputSelect->>OutputSelect: Toggle selection
    
    Note over User,InputMapping: Input Mapping Flow
    User->>InputMapping: Views input fields
    InputMapping->>InputMapping: Render collapsed by default
    User->>InputMapping: Clicks field header
    InputMapping->>InputMapping: Toggle collapse state
    InputMapping->>InputMapping: Show/hide field value input
    
    Note over User,VariablesInput: Variables Assignment Flow
    User->>VariablesInput: Views variables
    VariablesInput->>VariablesInput: Initialize with empty assignment
    User->>VariablesInput: Clicks assignment header
    VariablesInput->>VariablesInput: Toggle collapse state
    User->>VariablesInput: Selects variable via Combobox
    VariablesInput->>VariablesInput: Update assignment with variable details
    User->>VariablesInput: Variable deleted elsewhere
    VariablesInput->>VariablesInput: Cleanup invalid assignments

Loading

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}