Currently, Phabricator uses responsive layout to rearrange UI elements into a more-vertical configuration on tablets or mobile devices.

Today, responsive layout is only a function of window width: resizing your window will trigger layout changes. Each element may have "mobile", "tablet", and/or "default/desktop" renderings. These renderings have specific width breakpoints; the whole system is all-or-nothing with three specific breakpoints.

This handles most situations reasonably well, but is increasingly running into limitations in modern design. In particular:

• Now that Differential and Diffusion have a default sidebar UI element, the content pane is often pushed down to "tablet width" and would be well-served by a layout change. This change doesn't trigger because the window width is still "desktop width".
• In dashboards, result lists may be rendered in a 2/3 or 1/3 view. Although most result lists have an appropriate 1/3 rendering available, they don't layout this way because the window width is "desktop width".
• Many elements have fewer (or more) than 2 total breakpoints, and/or have breakpoints at specific layout widths, which may not match well with device widths. Devices have always been a continuum of widths anyway -- not really three mobile/tablet/desktop buckets -- and this is only becoming more true over time.

Instead, elements should have a reflow-aware, width-measuring container element which adjusts layout for the contained content only, at content-specific breakpoints.