cloud-hosting-platform/site-builder
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(containers): only flex-convert Container/Section when vertical-align set (avoid blockifying inline-block children)

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
shadowdao
2026-07-14 06:55:20 -07:00
co-authored by Claude Opus 4.8
parent 9750a6c2bf
commit 4a426e3513
4 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
craft/src/components/layout/Container.toHtml.test.ts
+21 -4
View File
@@ -65,14 +65,29 @@ describe('Container.toHtml tag allowlist (adversarial re-review, same class as C
});
describe('Container.toHtml vertical alignment (justify-content + min-height)', () => {
test('is always a column flex container (display:flex;flex-direction:column)', () => {
// Regression lock: Container/Section must NOT unconditionally become a
// flex container. Flex-blockifies in-flow children, forcing components
// that deliberately render display:inline-block (ButtonLink, Icon) to
// stack vertically instead of sitting side-by-side -- a real visual
// regression for existing published pages that never touch vertical
// alignment.
test('does NOT become a flex container when no vertical alignment is set (plain block flow preserved)', () => {
const { html } = toHtml({}, 'child');
expect(html).toContain('display:flex');
expect(html).toContain('flex-direction:column');
expect(html).not.toContain('display:flex');
expect(html).not.toContain('flex-direction');
});
test('style.justifyContent flows into the emitted style attribute', () => {
test('does NOT become a flex container from min-height alone (min-height must not itself trigger flex)', () => {
const { html } = toHtml({ style: { minHeight: '400px' } }, 'child');
expect(html).not.toContain('display:flex');
expect(html).not.toContain('flex-direction');
expect(html).toContain('min-height:400px');
});
test('becomes a column flex container when style.justifyContent is set (feature still works)', () => {
const { html } = toHtml({ style: { justifyContent: 'center' } }, 'child');
expect(html).toContain('display:flex');
expect(html).toContain('flex-direction:column');
expect(html).toContain('justify-content:center');
});
@@ -83,6 +98,8 @@ describe('Container.toHtml vertical alignment (justify-content + min-height)', (
test('justify-content and min-height still flow through in boxed (contentWidth) mode', () => {
const { html } = toHtml({ contentWidth: 'boxed', style: { justifyContent: 'flex-end', minHeight: '500px' } }, 'child');
expect(html).toContain('display:flex');
expect(html).toContain('flex-direction:column');
expect(html).toContain('justify-content:flex-end');
expect(html).toContain('min-height:500px');
});