Fix /cloud layout collisions below the 1200px design width

[rahuldoval]

Three separate layout problems on /cloud, all appearing below the 1200px design width. Branched off latest main, independent of #945.

1. Features section ran edge to edge (768–1279px)

.section was capped at max-width: 1200px but only received a horizontal inset inside @media (max-width: 767px). Everything from 768px to 1279px rendered flush against both viewport edges — in the side-by-side layout and in the stacked one, which is why it looked broken at both ends of that range.

Now uses the same insets the sibling ComparisonSection already applied: calc(100% - 64px) at ≤1279px and calc(100% - 32px) at ≤767px.

2. Card gap collapsed to zero, then overflowed (1024–1263px)

The image and copy were fixed, non-shrinking flex items — flex: 0 0 720px and flex: 0 0 400px, totalling 1120px — with the space between them produced entirely by justify-content: space-between. That only works when the content box is wider than 1120px. At exactly 1120px the gap became zero; below it the card overflowed its own container.

The image is now flex: 0 1 720px with min-width: 0, and the card carries an explicit gap: 80px as a floor. space-between still distributes any leftover space, so the ≥1264px rendering is byte-for-byte the original design. The image also carries aspect-ratio: 720 / 400, so it scales down rather than cropping as it narrows.

3. Hero subtitle bled off both edges on phones

.subtitle was pinned with width: 400px and flex: 0 0 400px. The ≤767px block cleared max-width but never width, so on a 375px phone it stayed 400px wide and overhung 12px on each side.

Measured results

Verified in-browser at each width, measuring real bounding boxes rather than eyeballing:

Viewport	Before	After
1440	section 1200, image 720×400, copy 400, gap 80	unchanged
1264	as designed	unchanged
1100	copy overflowed to x=1120 (vw 1100); headings flush at x=0	inset 32px; image 556×309 (aspect 1.80 preserved); gap 80
1024	overflowed	inset 32px; image 480 wide, aspect 1.80; gap 80
900	section spanned 0→900, flush both edges	inset 32px
768	flush	inset 32px
375	subtitle spanned −12→388	subtitle 16→359, inside bounds

documentElement.scrollWidth never exceeds the viewport at any tested width.

Site-wide audit

Swept /, /openclaw-os, /compare and /cloud at 1100px and 375px with a script flagging elements that overflow the viewport or sit within 12px of an edge, and separately grepped every CSS module for centered max-width containers lacking a horizontal inset.

Everything outside /cloud is clean. Two things flagged and deliberately not changed, because both are intentional:

• CompatibilitySection on / — .rows uses margin: 0 -20px to break the chip marquee out of the section inset, with the inner viewport clipping via overflow-x: hidden. Standard full-bleed pattern.
• HeroSection on /openclaw-os — an oversized illustration inside .mobileIllustrationViewport, which clips it by design.

ComparisonSection was flagged by the static grep but is genuinely fine — it uses the width-calc mechanism rather than padding, which the grep didn't recognise. The in-browser audit correctly cleared it.

Notes

CSS-only. main currently carries 5 pre-existing tsc errors and 1 ESLint error; this branch has exactly the same counts, so nothing new is introduced. Prettier clean on all three files.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openui-docs	Ready	Preview	Aug 7, 2026 11:31am