Fix: Match cell editor width to column width

[Om7035]

Issue

When a cell is opened for editing, the popup cell editor has a pre-specified width that doesn't match the width of the corresponding column that triggered the cell editor to emerge.

Root Cause

The OverlayContainer in RecordTableCellEditMode was using its default width instead of matching the column width.

Solution

Modified RecordTableCellEditMode to:

1. Import getRecordTableColumnFieldWidthCSSVariableName utility
2. Create StyledOverlayContainer that extends OverlayContainer with dynamic width
3. Use CSS variable --record-table-column-field-{columnIndex} to set width based on column index
4. Pass cellPosition.column as columnIndex prop

Technical Details

• Uses existing CSS variable system that stores column widths
• Leverages cellPosition.column from RecordTableCellContext
• Maintains all existing functionality while fixing the width issue
• No breaking changes to existing API

Testing

• Cell editors now properly match their column widths
• All existing functionality is preserved
• Follows existing CSS variable patterns in the codebase

Expected Behavior

The cell editor width now dynamically matches the width of the column that triggered it, providing a consistent and intuitive user experience.

Fixes #14599

[greptile-apps]

Greptile Overview

{"summary": "### Grept

Sequence Diagram

sequenceDiagram
    participant User
    participant RecordTableCellEditMode
    participant useRecoilComponentValue
    participant useAvailableComponentInstanceIdOrThrow
    participant useSetRecoilComponentState
    participant useFloating
    participant useIsFieldInputOnly
    participant RecordTableCellContext
    participant useFocusRecordTableCell
    participant StyledOverlayContainer
    participant StyledInputModeOnlyContainer

    User->>RecordTableCellEditMode: "Click to edit cell"
    
    RecordTableCellEditMode->>useRecoilComponentValue: "Get field error state"
    useRecoilComponentValue-->>RecordTableCellEditMode: "Return isFieldInError"
    
    RecordTableCellEditMode->>useAvailableComponentInstanceIdOrThrow: "Get component instance ID"
    useAvailableComponentInstanceIdOrThrow-->>RecordTableCellEditMode: "Return recordFieldComponentInstanceId"
    
    RecordTableCellEditMode->>useSetRecoilComponentState: "Initialize layout direction state"
    useSetRecoilComponentState-->>RecordTableCellEditMode: "Return setFieldInputLayoutDirection"
    
    RecordTableCellEditMode->>useSetRecoilComponentState: "Initialize layout direction loading state"
    useSetRecoilComponentState-->>RecordTableCellEditMode: "Return setFieldInputLayoutDirectionLoading"
    
    RecordTableCellEditMode->>useFloating: "Setup floating positioning with middleware"
    useFloating-->>RecordTableCellEditMode: "Return refs and floatingStyles"
    
    RecordTableCellEditMode->>useIsFieldInputOnly: "Check if field input only mode"
    useIsFieldInputOnly-->>RecordTableCellEditMode: "Return isFieldInputOnly boolean"
    
    RecordTableCellEditMode->>RecordTableCellContext: "Get cell position context"
    RecordTableCellContext-->>RecordTableCellEditMode: "Return cellPosition"
    
    RecordTableCellEditMode->>useFocusRecordTableCell: "Get focus cell function"
    useFocusRecordTableCell-->>RecordTableCellEditMode: "Return focusRecordTableCell"
    
    alt isFieldInputOnly is true
        RecordTableCellEditMode->>StyledInputModeOnlyContainer: "Render input-only container"
        User->>StyledInputModeOnlyContainer: "Click container"
        StyledInputModeOnlyContainer->>useFocusRecordTableCell: "Focus cell with position"
        StyledInputModeOnlyContainer-->>RecordTableCellEditMode: "Render children"
    else isFieldInputOnly is false
        RecordTableCellEditMode->>StyledOverlayContainer: "Render overlay with column width"
        Note over StyledOverlayContainer: "Uses CSS variable for column width based on cellPosition.column"
        StyledOverlayContainer-->>RecordTableCellEditMode: "Render children with proper width"
    end
    
    RecordTableCellEditMode-->>User: "Display edit mode with proper width"

Loading

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: This import is unused and should be removed

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/twenty-front/src/modules/action-menu/hooks/useShouldActionBeRegisteredParams.ts
Line: 19:19

Comment:
**style:** This import is unused and should be removed

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

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 940e91f

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:29577

This environment will automatically shut down when the PR is closed or after 5 hours.