ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-07 10:06:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): set explicit dimensions on data-hf-inner-root wrapper

Browse Source 
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.
This commit is contained in:
Miguel Ángel
2026-05-23 14:53:16 -04:00
parent 793a2405b5
commit 3983d4e7bf
7 changed files with 475 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/runtime/compositionLoader.ts
+4
View File
@@ -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;
}