diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx index 0ba50510b128..7b39be3806b6 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx @@ -340,6 +340,26 @@ export var storyboard = ( } }) }) + + it('also works for stretching cells', async () => { + const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report') + + await runCellResizeTest( + editor, + 'column-end', + gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10), + EP.fromString('sb/scene/grid/eee'), + ) + + const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } = + editor.renderedDOM.getByTestId('grid-child-stretch').style + expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({ + gridColumnEnd: '11', + gridColumnStart: '4', + gridRowStart: '4', + gridRowEnd: 'auto', + }) + }) }) const ProjectCode = `import * as React from 'react' @@ -425,6 +445,17 @@ export var storyboard = ( data-uid='ddd' data-testid='grid-child' /> +
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 2f47003ac5ce..daa9996bc207 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 @@ -38,12 +38,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = ( return null } - const isFillContainer = isFixedHugFillModeApplied( - canvasState.startingMetadata, - selectedElement, - 'fill', - ) - if (!isFillContainer) { + const isFillOrStretchContainer = + isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') || + isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch') + if (!isFillOrStretchContainer) { return null } diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts index 7f0b03ef28a1..06588173c38b 100644 --- a/editor/src/components/inspector/inspector-common.ts +++ b/editor/src/components/inspector/inspector-common.ts @@ -679,14 +679,23 @@ export function detectFillHugFixedState( ) if (MetadataUtils.isGridCell(metadata, elementPath)) { - if ( + const isStretchingExplicitly = (element.specialSizeMeasurements.alignSelf === 'stretch' && axis === 'horizontal' && width == null) || (element.specialSizeMeasurements.justifySelf === 'stretch' && axis === 'vertical' && height == null) - ) { + + const isStretchingImplicitly = + width == null && + height == null && + (element.specialSizeMeasurements.alignSelf == null || + element.specialSizeMeasurements.alignSelf === 'auto') && + (element.specialSizeMeasurements.justifySelf == null || + element.specialSizeMeasurements.justifySelf === 'auto') + + if (isStretchingExplicitly || isStretchingImplicitly) { return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' } } }