Widget: Allow resizing from all corners and sides

[bosiraphael]

CleanShot.2025-11-06.at.16.27.49.mp4

[greptile-apps]

Greptile Overview

Greptile Summary

Enhanced widget resize functionality to support all 8 directions (corners and sides) instead of just bottom-right corner.

Key Changes:

• Added ReactGridLayoutCardWrapper to properly forward refs and props from react-grid-layout
• Refactored PageLayoutGridResizeHandle to render different handle types (corners with icons, sides with bars) based on direction
• Updated resize handles array from ['se'] to all 8 directions: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
• Added 3 new corner radius icons (IconRadiusTopLeft, IconRadiusTopRight, IconRadiusBottomLeft)

Issues Found:

• ReactGridLayoutCardWrapper incorrectly includes key in props interface and tries to pass it as a regular prop, which will cause React warnings

Confidence Score: 3/5

• Safe to merge after fixing the key prop issue in ReactGridLayoutCardWrapper
• The resize handle implementation is solid, but the new wrapper component has incorrect handling of React's special key prop which will cause console warnings and potentially unexpected behavior
• packages/twenty-front/src/modules/page-layout/components/ReactGridLayoutCardWrapper.tsx requires fixes before merging

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/page-layout/components/ReactGridLayoutCardWrapper.tsx	2/5	New wrapper component with incorrect key prop handling - will cause React warnings
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx	5/5	Enhanced resize handles for all 8 directions with proper styling and cursor types
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx	5/5	Updated to use new wrapper component and enable all 8 resize handles

Sequence Diagram

sequenceDiagram
    participant User
    participant PageLayoutGridLayout
    participant ResponsiveGridLayout
    participant ReactGridLayoutCardWrapper
    participant PageLayoutGridResizeHandle
    participant WidgetRenderer

    User->>PageLayoutGridLayout: Hovers over widget
    PageLayoutGridLayout->>ResponsiveGridLayout: Renders with resizeHandles=['n','s','e','w','ne','nw','se','sw']
    ResponsiveGridLayout->>ReactGridLayoutCardWrapper: Creates wrapper for each widget
    ReactGridLayoutCardWrapper->>WidgetRenderer: Renders widget content
    ResponsiveGridLayout->>PageLayoutGridResizeHandle: Renders 8 handles (one per direction)
    PageLayoutGridResizeHandle->>PageLayoutGridResizeHandle: Determines handle type (corner icon vs side bar)
    PageLayoutGridResizeHandle-->>User: Displays appropriate handle with cursor
    
    User->>PageLayoutGridResizeHandle: Starts drag on any handle
    PageLayoutGridResizeHandle->>ResponsiveGridLayout: Triggers onMouseDown
    ResponsiveGridLayout->>PageLayoutGridLayout: Calls onLayoutChange
    PageLayoutGridLayout->>PageLayoutGridLayout: Updates layout state

Loading

_{7 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

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

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

[lucasbordeau]

I would rename handleAxis to WidgetHandleAxis just to clear any doubt around the handle word that we use for event handlers

[lucasbordeau]

I get a "trash dance" when I resize with the bottom handle, I think it might be good to deactivate on mouse enter on mouse leave with an additional state while resizing.

Enregistrement.de.l.ecran.2025-11-07.a.10.44.31.mov

[bosiraphael]

I get a "trash dance" when I resize with the bottom handle, I think it might be good to deactivate on mouse enter on mouse leave with an additional state while resizing.

I'll take care of that

[lucasbordeau]

LGTM for the code otherwise

[bosiraphael]

CleanShot.2025-11-07.at.11.41.26.mp4

@lucasbordeau Got rid of the "trash dance"