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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/components/layout/Section.tsx

@@ -103,6 +103,13 @@ export const Section: UserComponent<SectionProps> = ({
 
   const hasTopDivider = topDivider && topDivider !== 'none';
   const hasBottomDivider = bottomDivider && bottomDivider !== 'none';
+  // Section's root only becomes a column flex container when the user has
+  // actually set `style.justifyContent` (Vertical Alignment control, paired
+  // with `style.minHeight`) -- see the matching note in Container.tsx for
+  // why an unconditional conversion is a real regression (blockifies
+  // deliberately inline-block children like ButtonLink/Icon) rather than a
+  // no-op, so plain block flow is preserved unless vertical-align is set.
+  const hasVerticalAlign = !!style.justifyContent;
 
   return (
     <section
@@ -110,16 +117,9 @@ export const Section: UserComponent<SectionProps> = ({
       id={anchorId || undefined}
       style={{
         width: '100%',
-        // Section's root is always a column flex container so
-        // `style.justifyContent` (Vertical Alignment control, paired with
-        // `style.minHeight`) has an axis to act on -- see the matching note
-        // in Container.tsx for why this is a no-op for existing content
-        // (default justify-content/align-items reproduce ordinary block
-        // stacking).
-        display: 'flex',
-        flexDirection: 'column',
         position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
         ...style,
+        ...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
       }}
     >
       {hasTopDivider && (
@@ -227,13 +227,13 @@ function buildDividerHtml(
 (Section as any).toHtml = (props: SectionProps, childrenHtml: string) => {
   const hasTopDivider = props.topDivider && props.topDivider !== 'none';
   const hasBottomDivider = props.bottomDivider && props.bottomDivider !== 'none';
+  const hasVerticalAlign = !!props.style?.justifyContent;
 
   const outerStyle = cssPropsToString({
     width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
     position: (hasTopDivider || hasBottomDivider) ? 'relative' : undefined,
     ...props.style,
+    ...(hasVerticalAlign ? { display: 'flex', flexDirection: 'column' } : {}),
   });
   const innerStyle = cssPropsToString({
     maxWidth: props.innerMaxWidth || '1200px',