Responsive breakpoints: md:/lg:/xl: classes resolved against the live window width

[shanerbaner82]

Why

EDGE screens had no way to adapt to window width. On an iPad, and on Android tablets and foldables, a screen laid out for a phone stayed a phone layout, and "responsive" meant branching in PHP, which can't see the window and misses rotation and Split View.

What

Breakpoint prefixes

Tailwind's mobile-first prefixes, plus Material's window size classes:

Prefix	From
sm:	640
medium:	600
md:	768
expanded:	840
lg:	1024
xl:	1280
2xl:	1536

{{-- Stacked on a phone, side by side on a tablet --}}
<native:column class="w-full gap-6 p-4 md:flex-row md:gap-8 lg:p-8">
    <native:column class="md:flex-1">...</native:column>
    <native:column class="md:flex-1">...</native:column>
</native:column>

<native:column class="hidden md:flex w-[280]">...</native:column>

<native:lazy-grid class="grid-cols-2 md:grid-cols-3 lg:grid-cols-4">...</native:lazy-grid>

• Resolved on the device, against the window. PHP can't know the window width, and on iPad it changes under a running screen. Each node's breakpoints ship as one _variants JSON prop (the packed node struct is fixed, so props are the only extensible slot). NodeView on both platforms picks the widest breakpoint that fits the live window width, so a screen re-flows on rotation and Split View with no PHP round trip. Nodes without breakpoints pay one branch.
• Each breakpoint builds on everything narrower. An entry is the difference between two complete builds of the node (everything narrower, then that plus this breakpoint's classes), made through a throwaway element of the node's type. So p-4 md:px-8 keeps its vertical padding, rounded-xl md:rounded-t-3xl keeps its bottom corners, and element props (tracking, leading, font family, object fit, grid columns) behave exactly as they do unprefixed. The throwaway build uses its own callback registry, so screen callback ids don't shift.
• Combines with the other variants in either order: md:dark:, dark:md:, ios:md:.
• Configurable via a new nativephp.breakpoints table, which also allows custom names ('tablet' => 700).
• Min-width only. max-*: and min-[…]: are not supported.

Also in this PR

• hidden, plus flex / inline-flex / block / inline-block / grid to show an element again, for the hidden md:flex pattern.
• The hidden attribute now works. <native:column hidden> was documented but never reached the wire.
• grid-cols-N sets a lazy grid's column count. An explicit :columns still wins.
• text-7xl to text-9xl.

⚠️ iOS FlexContainer: re-measure after a resize (affects every app)

Worth a close look, because it changes behaviour outside breakpoints. Rotating or resizing the window on iOS left text wrapped at the old width until the next launch.

FlexContainer's sizeCache outlives a layout pass (a resize doesn't trigger updateCache), and a cache hit leaves each child's idealSize at whatever the last real measurement set. After a resize, a row measured .unspecified hits the cache, and placeSubviews lays its text out at the shrunk width from before. NativeTreeRenderer now bumps a static measurementGeneration when the window width changes, and each container empties its memo on its next call. This means one extra measurement pass per resize and nothing otherwise.

This bug is on main already. Breakpoints just make resizing common. Android doesn't have it.

Testing

• pint, phpstan, and the full Pest suite: 1018 passing. tests/Unit/Edge/ResponsiveVariantsTest.php covers parsing, the wire format, building on the base, prefix order, display, element props, callback isolation and the hidden attribute.
• iPad Pro 13" sim (iOS 27), on a real app's marketing page: portrait at 1032pt (lg) and landscape at 1376pt (xl, including xl:text-7xl), rotated portrait → landscape → portrait with no relaunch. The round trip matches a fresh launch in each orientation, which is how the FlexContainer fix was confirmed.
• Android tablet emulator (960×600dp), same page: portrait at 600dp (below sm) and landscape at 960dp (sm and md), rotated both ways in one process.
• Tested on device by eye: breakpoint layout, padding, font size and flex direction. Covered by unit tests only: hidden md:flex, per-corner radius, border width and grid-cols behind a breakpoint.

Notes

• Docs: Docs: responsive breakpoints, display classes and grid-cols nativephp.com#522
• Expect conflicts with Expanded Developer Tooling Hooks #307 (NativeUINode.kt, SwiftUINodeRenderer.swift, NativeElementCollector.php), Shared-element view transitions (ref + @navigate.viewTransition) #372 (NodeView) and fix: Android crashes when a positional node ID changes type #436 (NodeView.kt). I'll rebase against whichever lands first.
• No mobile-ui changes needed: plugin renderers render children through NodeView, which resolves breakpoints before any renderer sees the node.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: efcd5b8f-18bd-4d29-b62e-789be5243587

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

_{Comment @coderabbitai help to get the list of available commands.}

[simonhamp]

We tested the FlexContainer counter on its own on an iPad Pro 13" sim: main, this branch, and this branch with only the counter removed. After rotating, every screen matched a fresh launch pixel for pixel in all three builds, with and without breakpoints. We couldn't reproduce the bug on main and found no value in the counter.

[simonhamp]

Pushed two commits to this branch.

41e41d1 fixes hidden on iOS. It only faded the content, so the node's background and border still drew. FlexContainer never places a hidden child, so SwiftUI sized that leftover background to the whole row and drew it over the siblings. xl:hidden in a row showed an empty coloured bar. The opacity now wraps the whole node in ResolvedNodeView. On Android the same kind of thing happened for a hidden absolute child (its bg-* still drew a dot), so ComposeFlexLayout now skips hidden children in the absolute loop too. Checked on an iPad sim and an Android emulator, before and after rotation. Rows without a hidden child are pixel-identical.

55b30b5 merges main. The only conflict was FlexContainer.CacheData, where #480 added measuredKey next to our generation. They're independent, so both stay. Pest passes and the iOS build runs.