In the Public UI, the content is wrapped in .content-area twice:
packages/publicui/routes/index.tsx wraps the route's <Outlet /> in <div className="content-area">;packages/layout/slots/Main.tsx, rendered inside it, wraps the content slots in <div className="content-area"> again.
<div class="content-area">
<div class="content-area">
<div class="slate-editor" data-slate-editor="true">…</div>
</div>
</div>.content-area is the content root that themes declare their content tokens on (#199, #200). It also sets container-type: inline-size for the block container queries, and @plone/layout's block rules start from it, such as .content-area > .block. Two nested roots make it unclear which one a theme or a container query refers to.
To do: keep one .content-area, most likely the one around the content slots in Main.tsx. The route's wrapper can get its own class if it needs styling. Check the public visual tests, and check that the CMS UI editor, which has its own single .content-area, is unaffected.
In the Public UI, the content is wrapped in
.content-areatwice:packages/publicui/routes/index.tsxwraps the route's<Outlet />in<div className="content-area">;packages/layout/slots/Main.tsx, rendered inside it, wraps the content slots in<div className="content-area">again..content-areais the content root that themes declare their content tokens on (#199, #200). It also setscontainer-type: inline-sizefor the block container queries, and@plone/layout's block rules start from it, such as.content-area > .block. Two nested roots make it unclear which one a theme or a container query refers to.To do: keep one
.content-area, most likely the one around the content slots inMain.tsx. The route's wrapper can get its own class if it needs styling. Check the public visual tests, and check that the CMS UI editor, which has its own single.content-area, is unaffected.