diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts index 09c8a5ea3003..2141f6add524 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts @@ -17,6 +17,8 @@ import { import { gridContainerIdentifier, gridItemIdentifier } from '../../../editor/store/editor-state' import { cssKeyword } from '../../../inspector/common/css-utils' import { isFillOrStretchModeAppliedOnAnySide } from '../../../inspector/inspector-common' +import { CSSCursor } from '../../canvas-types' +import { setCursorCommand } from '../../commands/set-cursor-command' import { controlsForGridPlaceholders, gridEdgeToEdgePosition, @@ -172,9 +174,18 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = ( ), } + const cursor = + interactionSession.activeControl.edge === 'column-start' || + interactionSession.activeControl.edge === 'column-end' + ? CSSCursor.ColResize + : CSSCursor.RowResize + return strategyApplicationResult( - getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps), - [EP.parentPath(selectedElement), selectedElement], + [ + ...getCommandsForGridItemPlacement(selectedElement, gridTemplate, gridProps), + setCursorCommand(cursor), + ], + [(EP.parentPath(selectedElement), selectedElement)], ) }, } diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 011f3ed07876..b0ccf8058658 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -1682,7 +1682,6 @@ interface GridResizeControlProps { export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) => { const gridTarget = getGridIdentifierContainerOrComponentPath(target) - const colorTheme = useColorTheme() const element = useEditorState( Substores.metadata, @@ -1854,7 +1853,7 @@ export const GridResizeControlsComponent = ({ target }: GridResizeControlProps) left: bounds?.x ?? element.globalFrame.x, width: bounds?.width ?? element.globalFrame.width, height: bounds?.height ?? element.globalFrame.height, - backgroundColor: isResizing ? colorTheme.primary25.value : 'transparent', + backgroundColor: 'transparent', }} >