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

fix(container): align block children when Content Alignment is set

Browse Source 
textAlign only affects inline content, so block children like ImageBlock
(display:block, width:100%) ignored it. Switch to flex-column with
align-items mapped from textAlign whenever alignment is set; layout is
unchanged when alignment is unset.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-04-26 20:24:28 -07:00
parent 91a6b6f34b
commit 4acbeefaed
1 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
craft/src/components/layout/Container.tsx
View File

@@ -20,6 +20,17 @@ interface ContainerProps {
contentWidth?: 'boxed' | 'full';
}
// Map textAlign to a flex alignItems value so block-level children (images,
// columns, sections) align horizontally — textAlign alone only affects inline
// content. Returns undefined when no alignment is set so we leave layout as
// normal block flow.
const flexAlignFromTextAlign = (textAlign: CSSProperties['textAlign']): CSSProperties => {
if (textAlign === 'center') return { display: 'flex', flexDirection: 'column', alignItems: 'center' };
if (textAlign === 'right') return { display: 'flex', flexDirection: 'column', alignItems: 'flex-end' };
if (textAlign === 'left') return { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' };
return {};
};
export const Container: UserComponent<ContainerProps> = ({
style = {},
tag = 'div',
@@ -29,14 +40,16 @@ export const Container: UserComponent<ContainerProps> = ({
}) => {
const { connectors: { connect, drag } } = useNode();
const needsBoxedWrapper = contentWidth === 'boxed';
const flexStyles = flexAlignFromTextAlign(style.textAlign);
const outerStyle: CSSProperties = {
minHeight: '40px',
...style,
...(fullWidth ? { width: '100vw', marginLeft: 'calc(-50vw + 50%)' } : {}),
...(needsBoxedWrapper ? {} : flexStyles),
};
const needsBoxedWrapper = contentWidth === 'boxed';
const el = React.createElement(
tag,
{
@@ -45,7 +58,7 @@ export const Container: UserComponent<ContainerProps> = ({
'data-craft-container': 'true',
},
needsBoxedWrapper
? React.createElement('div', { style: { maxWidth: '1200px', margin: '0 auto' } }, children)
? React.createElement('div', { style: { maxWidth: '1200px', margin: '0 auto', ...flexStyles } }, children)
: children,
);
@@ -306,7 +319,13 @@ Container.craft = {
(Container as any).toHtml = (props: ContainerProps, childrenHtml: string) => {
const tag = props.tag || 'div';
const outerCss: CSSProperties = { ...props.style };
const isBoxed = props.contentWidth === 'boxed';
const flexStyles = flexAlignFromTextAlign(props.style?.textAlign);
const outerCss: CSSProperties = {
...props.style,
...(isBoxed ? {} : flexStyles),
};
if (props.fullWidth) {
outerCss.width = '100vw';
@@ -315,8 +334,8 @@ Container.craft = {
const styleStr = cssPropsToString(outerCss);
if (props.contentWidth === 'boxed') {
const innerStyle = cssPropsToString({ maxWidth: '1200px', margin: '0 auto' });
if (isBoxed) {
const innerStyle = cssPropsToString({ maxWidth: '1200px', margin: '0 auto', ...flexStyles });
return { html: `<${tag}${styleStr ? ` style="${styleStr}"` : ''}><div${innerStyle ? ` style="${innerStyle}"` : ''}>${childrenHtml}</div></${tag}>` };
}