Window resize / multi-monitor

Layout specs/app-layout/safe-area.kmd

Step diagram

  1. User drags the window or moves displays

    User

    Resize across DPI breakpoints, drag between displays with different scales, or rotate the device.

  2. Insets recompute

    SDK

    KoderSafeScaffold re-reads the platform window insets; CSS env(safe-area-inset-*) refreshes on web.

  3. Title bar relays out

    App

    KoderTitleBar resizes; the free area expands to fill the new width without breaking double-tap maximize.

    specs/desktop-apps/title-bar-double-click.kmd

  4. Content reflows

    App

    Layout responds in CSS / Flutter widgets — no fixed pixel values that go behind the new chrome.

Common pitfalls