From 3983d4e7bf292663d22a47ecba5af04f80834cd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sat, 23 May 2026 14:25:12 -0400 Subject: [PATCH] fix(core): set explicit dimensions on data-hf-inner-root wrapper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The prepareFlattenedInnerRoot function creates a wrapper div when inlining sub-compositions. This wrapper had no width/height, which broke CSS height:100% chains — any sub-composition using percentage heights with flexbox centering would collapse to 0px and render content at the top instead of centered. Read data-width/data-height from the inner root and set matching pixel dimensions on the wrapper's inline style. Applied in both the compiler (server-side bundling) and the runtime (browser-side composition loader). Adds a producer regression test with a centered card sub-composition that fails without this fix. --- packages/core/src/compiler/htmlBundler.ts | 7 + .../core/src/runtime/compositionLoader.ts | 4 + .../tests/sub-comp-height-percent/meta.json | 12 + .../output/compiled.html | 368 ++++++++++++++++++ .../sub-comp-height-percent/output/output.mp4 | 3 + .../src/centered-card.html | 62 +++ .../sub-comp-height-percent/src/index.html | 19 + 7 files changed, 475 insertions(+) create mode 100644 packages/producer/tests/sub-comp-height-percent/meta.json create mode 100644 packages/producer/tests/sub-comp-height-percent/output/compiled.html create mode 100644 packages/producer/tests/sub-comp-height-percent/output/output.mp4 create mode 100644 packages/producer/tests/sub-comp-height-percent/src/centered-card.html create mode 100644 packages/producer/tests/sub-comp-height-percent/src/index.html diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts index 5225ccc42..6b634b2bb 100644 --- a/packages/core/src/compiler/htmlBundler.ts +++ b/packages/core/src/compiler/htmlBundler.ts @@ -399,6 +399,13 @@ export function prepareFlattenedInnerRoot(innerRoot: Element): Element { prepared.setAttribute("data-hf-authored-id", authoredRootId); } prepared.setAttribute("data-hf-inner-root", "true"); + const w = prepared.getAttribute("data-width"); + const h = prepared.getAttribute("data-height"); + const widthVal = w ? `${w}px` : "100%"; + const heightVal = h ? `${h}px` : "100%"; + const existingStyle = (prepared.getAttribute("style") || "").trim(); + const fill = `width:${widthVal};height:${heightVal}`; + prepared.setAttribute("style", existingStyle ? `${existingStyle};${fill}` : fill); return prepared; } diff --git a/packages/core/src/runtime/compositionLoader.ts b/packages/core/src/runtime/compositionLoader.ts index bb335694a..2bc4f5523 100644 --- a/packages/core/src/runtime/compositionLoader.ts +++ b/packages/core/src/runtime/compositionLoader.ts @@ -85,6 +85,10 @@ function prepareFlattenedInnerRoot(innerRoot: HTMLElement): HTMLElement { prepared.setAttribute("data-hf-authored-id", authoredRootId); } prepared.setAttribute("data-hf-inner-root", "true"); + const w = prepared.getAttribute("data-width"); + const h = prepared.getAttribute("data-height"); + prepared.style.width = w ? `${w}px` : "100%"; + prepared.style.height = h ? `${h}px` : "100%"; return prepared; } diff --git a/packages/producer/tests/sub-comp-height-percent/meta.json b/packages/producer/tests/sub-comp-height-percent/meta.json new file mode 100644 index 000000000..a26267d77 --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/meta.json @@ -0,0 +1,12 @@ +{ + "name": "Sub-composition height:100% centering", + "description": "Verifies that sub-compositions using height:100% + flexbox centering render content centered, not stuck at the top. Regression test for the data-hf-inner-root wrapper missing explicit dimensions.", + "tags": ["sub-composition", "regression", "layout", "centering"], + "minPsnr": 20, + "maxFrameFailures": 10, + "minAudioCorrelation": 0.0, + "maxAudioLagWindows": 120, + "renderConfig": { + "fps": 24 + } +} diff --git a/packages/producer/tests/sub-comp-height-percent/output/compiled.html b/packages/producer/tests/sub-comp-height-percent/output/compiled.html new file mode 100644 index 000000000..e46ba029a --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/output/compiled.html @@ -0,0 +1,368 @@ + + + + + + + + +
+
+ + +
+
+
+ Centered +
+
+
+ + + +
+
+ + + diff --git a/packages/producer/tests/sub-comp-height-percent/output/output.mp4 b/packages/producer/tests/sub-comp-height-percent/output/output.mp4 new file mode 100644 index 000000000..a8829cd43 --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/output/output.mp4 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:86b9674608f35094c3cadd2c72f7c51f535f565f477b6275aef5314a0fe17847 +size 68603 diff --git a/packages/producer/tests/sub-comp-height-percent/src/centered-card.html b/packages/producer/tests/sub-comp-height-percent/src/centered-card.html new file mode 100644 index 000000000..5742c66db --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/src/centered-card.html @@ -0,0 +1,62 @@ + diff --git a/packages/producer/tests/sub-comp-height-percent/src/index.html b/packages/producer/tests/sub-comp-height-percent/src/index.html new file mode 100644 index 000000000..7801a905a --- /dev/null +++ b/packages/producer/tests/sub-comp-height-percent/src/index.html @@ -0,0 +1,19 @@ + + + + + + + + +
+
+
+ + +