diff --git a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
index 5b407d1423b8..a71db5b5a05f 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
@@ -1338,6 +1338,64 @@ export var storyboard = (
const resizeControl = getResizeControl(renderResult, EdgePositionBottomRight)
expect(resizeControl).toBeNull()
})
+ it('percent values are rounded to 2 decimal places after resizing', async () => {
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(`
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ const target = EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`)
+
+ await renderResult.dispatch([selectComponents([target], false)], true)
+ await resizeElement(renderResult, { x: -10, y: -10 }, EdgePositionBottomRight, emptyModifiers)
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(`
+
+ `),
+ )
+ })
describe('snap lines', () => {
it('horizontal snap lines are shown when resizing a multiselection', async () => {
const editor = await renderTestEditorWithCode(
diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
index cd85e689edd1..465eadf83955 100644
--- a/editor/src/components/canvas/commands/adjust-css-length-command.ts
+++ b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -15,6 +15,7 @@ import {
setJSXValuesAtPaths,
unsetJSXValuesAtPaths,
} from '../../../core/shared/jsx-attributes'
+import { roundTo } from '../../../core/shared/math-utils'
import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
import * as PP from '../../../core/shared/property-path'
import type { DerivedState, EditorState } from '../../editor/store/editor-state'
@@ -359,7 +360,7 @@ function updatePercentageValueByPixel(
const currentValuePercent = currentValue.value
const offsetInPercent = (byValue / parentDimensionPx) * 100
const newValueCssNumber: CSSNumber = {
- value: currentValuePercent + offsetInPercent,
+ value: roundTo(currentValuePercent + offsetInPercent, 2),
unit: currentValue.unit,
}
const newValue = printCSSNumber(newValueCssNumber, null)
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 477a1b2d53b6..8a6dd1aec2fe 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -622,7 +622,7 @@ export function detectFillHugFixedState(
const isGroupLike = treatElementAsGroupLike(metadata, elementPath)
const parsed = defaultEither(null, parseCSSLengthPercent(simpleAttribute))
- if (parsed != null && parsed.unit === '%') {
+ if (parsed != null && parsed.unit === '%' && parsed.value === 100) {
const valueWithType: FixedHugFill = { type: isGroupLike ? 'hug-group' : 'fill', value: parsed }
return { fixedHugFill: valueWithType, controlStatus: 'simple' }
}
diff --git a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx
index a6c70d47ce33..b3e507868279 100644
--- a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx
+++ b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx
@@ -349,6 +349,53 @@ describe('Fixed / Fill / Hug control', () => {
absoluteProjectWithInjectedStyle(`width: '100%', height: '100%'`),
)
})
+
+ it('detects fill container on a static element', async () => {
+ const editor = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(`
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [
+ EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
+ ])
+
+ expect(editor.renderedDOM.getAllByText(FillContainerLabel).length).toEqual(2)
+ })
+
+ it('percent values that are not 100% are not classified as fill container', async () => {
+ const editor = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(`
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [
+ EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
+ ])
+
+ expect(editor.renderedDOM.queryAllByText(FillContainerLabel).length).toEqual(0)
+ expect(editor.renderedDOM.getAllByText(FixedLabel).length).toEqual(2)
+ })
})
describe('hug contents', () => {