the Layout component in hydrogen-may shows up with the wrong size, until it is focused, then its displayed size changes

[balazsbajorics]

This is a problem in how we measure the size of unfocused and focused components which wrap their children in a thick layer of wrapper elements.

It is particularly problematic in the sample project, because it always shows up, and looks clearly incorrect because the outline visibly does not line up with what's rendered on the screen.

[seanparsons]

Mitigation for the issue added to the project here: concrete-utopia/hydrogen-editions-24#11

[seanparsons]

Diagnosis of the cause:

• It's defined with an Outlet as a child, which inside the component itself goes inside a fragment that makes up the return and inside that in a main element.
• That means we statically identify the Outlet as a child, which then accounts for its size when unfocused.
• However when we focus it, all the actual contents then get added into the metadata.
• When focused, by the power of recursion (and for the sake of simplicity putting to the side some inconsequential elements) the size for Layout ends up being effectively the size of the Outlet and the size of the Footer.

The outcome is that this possibly needs some time spent in the DOM walker, which we shouldn't do right now.