@os-legal/caml-react 0.1.2 can render dark/gradient full-width chapters flush against the viewport edge on mobile.
Root cause appears to be the full-width ChapterSection padding formula:
padding: 3rem calc((100% - 720px) / 2 + 2rem);
Below roughly 656px viewport width, that inline padding calculation becomes negative. Because CSS padding cannot be negative, browsers treat the declaration as invalid at computed-value time, so the full-width chapter loses the intended mobile gutter. In OpenContracts this surfaced as CAML article sections with headings/prose hard against the left edge on a 390-585px mobile viewport.
Suggested fix: clamp the inline padding and/or add an explicit mobile override, for example:
padding-inline: max(1rem, calc((100% - 720px) / 2 + 2rem));
or use a breakpoint for full-width chapters:
@media (max-width: 768px) {
padding-inline: max(1rem, env(safe-area-inset-left, 0px));
}Related: ArticleContainer currently uses min-height: 100vh; consumers embedding CAML inside mobile app shells may be better served by 100dvh support or by not forcing viewport height at the renderer level.
OpenContracts now has a local wrapper mitigation, but this should probably be fixed in caml-react so renderer output is mobile-safe by default.
@os-legal/caml-react 0.1.2 can render dark/gradient full-width chapters flush against the viewport edge on mobile.
Root cause appears to be the full-width ChapterSection padding formula:
Below roughly 656px viewport width, that inline padding calculation becomes negative. Because CSS padding cannot be negative, browsers treat the declaration as invalid at computed-value time, so the full-width chapter loses the intended mobile gutter. In OpenContracts this surfaced as CAML article sections with headings/prose hard against the left edge on a 390-585px mobile viewport.
Suggested fix: clamp the inline padding and/or add an explicit mobile override, for example:
or use a breakpoint for full-width chapters:
Related: ArticleContainer currently uses min-height: 100vh; consumers embedding CAML inside mobile app shells may be better served by 100dvh support or by not forcing viewport height at the renderer level.
OpenContracts now has a local wrapper mitigation, but this should probably be fixed in caml-react so renderer output is mobile-safe by default.