A container query that replaced a resize observer

Thirty lines of JavaScript observing an element and toggling a class, replaced by four lines of CSS.

// before
const ro = new ResizeObserver(([entry]) => {
  entry.target.classList.toggle('is-narrow', entry.contentRect.width < 480)
})
ro.observe(el)
// plus the cleanup, the initial call, and a debounce

The observer version also had a frame of the wrong layout on every resize, because the class is applied after the browser has already laid out — the CSS version has no such gap because it is part of layout. Thirty lines deleted, a dependency on a component lifecycle removed, and one fewer thing to clean up on unmount.