fix[sdks]: centering items in columns (#3979)

## Description

when we vertically center two individual elements we use `margin-top:
auto`, `margin-bottom: auto` to keep the elements in the center. Turns
out the builder-columns box doesn't respect height and shrinks to what’s
required and height gets applied to the root div (as we don’t use noWrap
true in case of columns). To fix this, we are adding `height: 100%` to
make sure that we respect the root div's height (if provided)

Jira
https://builder-io.atlassian.net/browse/ENG-8386

_Screenshot_
If relevant, add a screenshot or two of the changes you made.

Author: sidmohanty11

.changeset/sour-clocks-join.md

@@ -0,0 +1,13 @@
+---
+"@builder.io/react": patch
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-react-native": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Fix: centering items inside columns when columns has a fixed height

packages/react/src/blocks/Columns.tsx

@@ -100,6 +100,7 @@ class ColumnsComponent extends React.Component<any> {
           className="builder-columns"
           css={{
             display: 'flex',
+            height: '100%',
             ...(this.props.stackColumnsAt !== 'never' && {
               [`@media (max-width: ${
                 this.props.stackColumnsAt !== 'tablet'

packages/sdks-tests/src/e2e-tests/blocks.spec.ts

@@ -588,6 +588,40 @@ test.describe('Blocks', () => {
 
       expect(textCenter).toBeCloseTo(columnCenter, 1);
     });
+
+    test('blocks are centered vertically when all blocks are individually centered and columns has a fixed height', async ({
+      page,
+      sdk,
+    }) => {
+      test.skip(checkIsRN(sdk));
+      await page.goto('/columns-vertical-centering');
+
+      const columnsParent = page.locator(
+        'xpath=//div[contains(@class, "builder-columns")]/ancestor::div[1]'
+      );
+
+      const columnBox = await columnsParent.boundingBox();
+      const textBoxes = await columnsParent.locator('.builder-text').all();
+
+      if (!columnBox || !textBoxes) {
+        throw new Error('Could not get bounding boxes');
+      }
+
+      const columnCenter = columnBox.y + columnBox.height / 2;
+
+      const textCenters = await Promise.all(
+        textBoxes.map(async textBox => {
+          const textBoxBox = await textBox.boundingBox();
+          if (!textBoxBox) {
+            throw new Error('Could not get bounding box');
+          }
+          return textBoxBox.y + textBoxBox.height / 2;
+        })
+      );
+
+      expect(textCenters[0]).toBeCloseTo(columnCenter, 1);
+      expect(textCenters[1]).toBeCloseTo(columnCenter, 1);
+    });
   });
 
   test.describe('Embed', () => {

packages/sdks-tests/src/specs/columns-vertical-centering.ts

@@ -0,0 +1,123 @@
+export const COLUMNS_VERTICAL_CENTERING = {
+  ownerId: 'ad30f9a246614faaa6a03374f83554c9',
+  lastUpdateBy: null,
+  createdDate: 1742468200898,
+  id: '34d8d0d89db2442cb3d0b739991fb67f',
+  '@version': 4,
+  name: 'columns-v-centering',
+  modelId: '17c6065109ef4062ba083f5741f4ee6a',
+  published: 'draft',
+  meta: {
+    kind: 'page',
+    lastPreviewUrl:
+      'http://localhost:5173/columns-v-centering?builder.space=ad30f9a246614faaa6a03374f83554c9&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers%2CeditContentPriority&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=34d8d0d89db2442cb3d0b739991fb67f&builder.overrides.34d8d0d89db2442cb3d0b739991fb67f=34d8d0d89db2442cb3d0b739991fb67f&builder.overrides.page:/columns-v-centering=34d8d0d89db2442cb3d0b739991fb67f&builder.options.locale=Default',
+    hasLinks: false,
+  },
+  priority: -1015,
+  query: [
+    {
+      '@type': '@builder.io/core:Query',
+      property: 'urlPath',
+      operator: 'is',
+      value: '/columns-v-centering',
+    },
+  ],
+  data: {
+    title: 'columns-v-centering',
+    themeId: false,
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-f1ae6670480d44bfa78a4a3f15ee584b',
+        component: {
+          name: 'Columns',
+          options: {
+            columns: [
+              {
+                blocks: [
+                  {
+                    '@type': '@builder.io/sdk:Element',
+                    '@version': 2,
+                    id: 'builder-5f09976df08d4a67b9780dcb38b9ba45',
+                    component: {
+                      name: 'Text',
+                      options: {
+                        text: 'text 1',
+                      },
+                    },
+                    responsiveStyles: {
+                      large: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        position: 'relative',
+                        flexShrink: '0',
+                        boxSizing: 'border-box',
+                        marginTop: 'auto',
+                        lineHeight: 'normal',
+                        height: 'auto',
+                        marginBottom: 'auto',
+                      },
+                    },
+                  },
+                ],
+              },
+              {
+                blocks: [
+                  {
+                    '@type': '@builder.io/sdk:Element',
+                    '@version': 2,
+                    id: 'builder-f571ee77a16a45b08f59fdd36463ca5e',
+                    component: {
+                      name: 'Text',
+                      options: {
+                        text: 'text 2',
+                      },
+                    },
+                    responsiveStyles: {
+                      large: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        position: 'relative',
+                        flexShrink: '0',
+                        boxSizing: 'border-box',
+                        marginTop: 'auto',
+                        lineHeight: 'normal',
+                        height: 'auto',
+                        marginBottom: 'auto',
+                      },
+                    },
+                  },
+                ],
+              },
+            ],
+            space: 20,
+            stackColumnsAt: 'tablet',
+            reverseColumnsWhenStacked: false,
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+            height: '400px',
+          },
+        },
+      },
+    ],
+  },
+  metrics: {
+    clicks: 0,
+    impressions: 0,
+  },
+  variations: {},
+  lastUpdated: 1742468604796,
+  testRatio: 1,
+  createdBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  lastUpdatedBy: 'RuGeCLr9ryVt1xRazFYc72uWwIK2',
+  folders: [],
+};

packages/sdks-tests/src/specs/index.ts

@@ -88,9 +88,10 @@ import { COLUMNS_VERTICAL_CENTER_FLEX } from './columns-vertical-center-flex.js'
 import { DYNAMIC_ELEMENT } from './dynamic-element.js';
 import { CUSTOM_CODE_DOM_UPDATE } from './custom-code-dom-update.js';
 import { NEW_BLOCK_ADD } from './new-block-add.js';
-
 import { DYNAMIC_BUTTON } from './dynamic-button.js';
+import { COLUMNS_VERTICAL_CENTERING } from './columns-vertical-centering.js';
 import { SECTION_CHILDREN } from './section-children.js';
+
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
@@ -284,6 +285,7 @@ export const PAGES: Record<string, Page> = {
   '/custom-code-dom-update': { content: CUSTOM_CODE_DOM_UPDATE },
   '/new-block-add': { content: NEW_BLOCK_ADD },
   '/dynamic-button': { content: DYNAMIC_BUTTON },
+  '/columns-vertical-centering': { content: COLUMNS_VERTICAL_CENTERING },
   '/section-children': { content: SECTION_CHILDREN },
 } as const;
 

packages/sdks/src/blocks/columns/columns.lite.tsx

@@ -223,6 +223,7 @@ export default function Columns(props: ColumnProps) {
       css={{
         display: 'flex',
         lineHeight: 'normal',
+        height: '100%',
       }}
       style={state.columnsCssVars()}
       {...useTarget({