diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts index 9e306c35b6a7..1652011c6c3e 100644 --- a/editor/src/components/editor/defaults.ts +++ b/editor/src/components/editor/defaults.ts @@ -12,7 +12,7 @@ import { simpleAttribute, } from '../../core/shared/element-template' import type { NormalisedFrame } from 'utopia-api/core' -import { defaultImageAttributes } from '../shared/project-components' +import { defaultImageAttributes, insertableGridStyle } from '../shared/project-components' export function defaultSceneElement( uid: string, @@ -177,16 +177,7 @@ export function defaultGridElement(uid: string): JSXElement { uid, jsxAttributesFromMap({ 'data-uid': jsExpressionValue(uid, emptyComments), - style: jsExpressionValue( - { - position: 'absolute', - display: 'grid', - gridTemplateColumns: '1fr 1fr 1fr', - gridTemplateRows: '1fr 1fr 1fr', - gap: 10, - }, - emptyComments, - ), + style: jsExpressionValue(insertableGridStyle(), emptyComments), }), [], ) diff --git a/editor/src/components/shared/project-components.ts b/editor/src/components/shared/project-components.ts index 7859f4087962..1fc9ef491136 100644 --- a/editor/src/components/shared/project-components.ts +++ b/editor/src/components/shared/project-components.ts @@ -63,6 +63,7 @@ import { intrinsicHTMLElementNamesThatSupportChildren } from '../../core/shared/ import { getTopLevelElementByExportsDetail } from '../../core/model/project-file-utils' import { type Icon } from 'utopia-api' import type { FileRootPath } from '../canvas/ui-jsx-canvas' +import type { CSSProperties } from 'react' export type StylePropOption = 'do-not-add' | 'add-size' @@ -474,6 +475,16 @@ const divComponentGroup = { ), } +export function insertableGridStyle(): CSSProperties { + return { + position: 'absolute', + display: 'grid', + gridTemplateColumns: '1fr 1fr 1fr', + gridTemplateRows: '1fr 1fr 1fr', + gap: 10, + } +} + const gridComponentGroup: ComponentDescriptorsForFile = { grid: { properties: {}, @@ -489,13 +500,9 @@ const gridComponentGroup: ComponentDescriptorsForFile = { jsxAttributesFromMap({ style: jsExpressionValue( { - display: 'grid', - gridTemplateRows: '1fr 1fr 1fr', - gridTemplateColumns: '1fr 1fr 1fr', - gap: 10, - position: 'absolute', - width: 200, - height: 200, + ...insertableGridStyle(), + width: 150, + height: 150, }, emptyComments, ),