diff --git a/packages/ui/src/forms/RenderFields/RenderField.tsx b/packages/ui/src/forms/RenderFields/RenderField.tsx index c037ca50da..c3af0b30fc 100644 --- a/packages/ui/src/forms/RenderFields/RenderField.tsx +++ b/packages/ui/src/forms/RenderFields/RenderField.tsx @@ -85,6 +85,19 @@ export const RenderField: React.FC = ({ /> ) } else { + if (fieldComponentProps.field.type === 'row') { + for (const field of fieldComponentProps.field.fields) { + if (field.admin?.width) { + field.admin.style = { + ...field.admin.style, + maxWidth: field.admin.width, + } + + field.admin.width = undefined + } + } + } + RenderedField = ( { test('should render row fields inline and with explicit widths', async () => { await page.goto(url.create) const fieldA = page.locator('input#field-field_with_width_a') - await expect(fieldA).toBeVisible() const fieldB = page.locator('input#field-field_with_width_b') + + const fieldAGrandprent = fieldA.locator('..').locator('..') + const fieldBGrandprent = fieldB.locator('..').locator('..') + + await expect(fieldA).toBeVisible() await expect(fieldB).toBeVisible() + + const hasCorrectCSS = async (el: Locator) => { + return await el.evaluate((el) => { + return el.style.width === '' && el.style.maxWidth === '50%' + }) + } + + expect(hasCorrectCSS(fieldAGrandprent)).toBeTruthy() + expect(hasCorrectCSS(fieldBGrandprent)).toBeTruthy() + const fieldABox = await fieldA.boundingBox() const fieldBBox = await fieldB.boundingBox()