I was working on an image-tile rail for a one-third SharePoint column.
On desktop, it sat beside the main content, roughly 300 pixels wide. That was enough room for the tiles.
On a phone, SharePoint stacked the columns. Now those same tiles were above the article, and you had to scroll past them to get to what you came to read. I wanted the rail to collapse to a small text header there.
The web part already had a ResizeObserver measuring its container. It would have been convenient to use that width to decide when to collapse.
Except the desktop column was already narrow. On the phone, the stacked column could actually give the part more width. A rule based only on the container would collapse the tiles on desktop and leave them expanded on the phone. Backwards.
For the page layout I was targeting, the collapse used a viewport breakpoint below 640px, checked with matchMedia. That followed the point where the sidebar moved above the article. The collapsed rail was a 48px header row.
The container measurement stayed and it helped fit the contents inside the web part. It just wasn’t the measurement that told me when the SharePoint page had stacked its columns.