What problem does it solve?
Responsive layouts built on viewport-based @media queries, useMedia hooks, and screen:-prefixed props break when components need to respond to their own available space, and naive token swaps silently produce wrong breakpoints because the breakpoint and container scales share names but not pixel values.
Core Features & Use Cases
- Four-rung migration ladder: Replace styled @media components with Container/Flex/Grid responsive props, swap @media to @container, convert width-based useMedia to useResponsivePropValue or useContainerBreakpoint, or leave genuine non-width media features untouched.
- Pixel-value token mapping: Maps theme.breakpoints values to the nearest theme.container token by pixel value (e.g. breakpoints.sm at 800px maps to container.xl at 768px), avoiding the same-name mapping bug.
- Viewport escape hatch: Routes genuine window-driven layouts to screen:-prefixed responsive props and audits existing screen: props as migration candidates.
- Use Case: When refactoring a styled component that flips flex-direction at the sm breakpoint, delete the styled component and use a Flex primitive with direction={{xs: 'column', sm: 'row'}}, then visually verify the flip by resizing the element.
Quick Start
Ask the assistant to migrate the responsive @media and useMedia logic in a specific Sentry frontend component to container queries following this guide.
