UI Toolkit: Responsive Layout

Unity's UI Toolkit ships with Flexbox but no breakpoint system, no safe area handling, no orientation classes, and no platform-aware styling. Developers ship layouts that overlap iPhone notches, snap awkwardly at every screen size, and require manual Screen.safeArea coordinate inversion code in every project.

This asset is the missing layer. Drop a single ResponsiveManager component on your UIDocument and your panel gains automatic USS class application for breakpoints, orientation, platform, and notch presence — plus a SafeAreaContainer custom element you can drop anywhere you need content inset from the notch and home indicator.

Works on every screen.

SafeAreaContainer wraps any subtree and applies the correct padding for the current device's notch, home indicator, and camera cutouts. Per-edge masking lets you opt into individual edges (top-only, horizontal-only, etc.). A minimum-padding fallback keeps non-notched devices comfortable. Nested SafeAreaContainers detect each other and avoid double-padding. Works correctly under any PanelSettings scale mode — Constant Pixel Size, Scale With Screen Size, or Constant Physical Size — with automatic panel-to-screen scale correction.

Breakpoints that actually adapt.

Drop in the default BreakpointProfile (phone-portrait, phone-landscape, tablet, desktop) or define your own. The ResponsiveManager applies a USS class to the document root on every breakpoint change so your stylesheets just work. Write code-level reactions with WhenBreakpoint("desktop", active => …) returning IDisposable handles, or mark methods with the [ResponsiveCallback] attribute and have them auto-invoked. Swap entire UXML templates per breakpoint via BreakpointTemplateSwapper with a re-binding event for any data already wired up.

Five demo scenes included.

Safe Area (visualize notch padding and cycle edge configurations), Breakpoint (three-column adaptive layout that morphs from single column on phone to sidebar + main + secondary on desktop), Orientation (portrait/landscape reflow), Aspect Ratio (16:9 / 4:3 / 1:1 / 9:16 cycling against all four fit modes), and Platform Styles (touch vs pointer button sizing). Each demo ships with UXML, USS, controller script, and a README explaining what it shows.

Aspect ratio and platform detection.

AspectRatioContainer keeps video players, image previews, and any fixed-ratio content correctly framed regardless of container size — four fit modes (Contain, Cover, WidthBased, HeightBased) cover every real use case. PlatformDetector applies thirteen USS classes for OS, device category, touch capability, and notch presence so you can branch styling on .platform-ios, .has-touch, .has-notch, and more — all from your stylesheet, no C# branches.

Works with UI Toolkit: Tween Engine.

When you own UI Toolkit: Tween Engine, open Tools > KrookedLilly > Setup and enable the Tween Engine → Responsive Layout integration. Two extensions light up. Smoothly interpolate an AspectRatioContainer between ratios instead of snapping — useful for hero panels that morph between 1:1 on phone and 16:9 on tablet:

hero.TweenAspectRatio(16f / 9f, duration: 0.3f);

And fade the new template into a BreakpointTemplateSwapper on each breakpoint change so layout swaps feel less abrupt:

swapper.AddFadeInAnimation();

Both fall back to instant transitions when the integration is off.

Full C# source, no DLLs.

XML documentation on every public API. Works with both Unity's Legacy Input Manager and the new Input System package. Zero hard dependencies.