SidebarInset is missing min-w-0, so horizontally-overflowing content pushes the page wider than the viewport

SidebarInset renders as a flex item with relative flex w-full flex-1 flex-col and no min-w-0. A flex item defaults to min-width: auto, so it will not shrink below its content's intrinsic width — any wide child makes the content column refuse to yield space to the sidebar, and the whole page overflows horizontally.

Measured (React Aria style, Tailwind 4, floating + icon-collapse sidebar at --sidebar-width: 14rem), by toggling only that one class in the live DOM:

	content column	page scrollWidth	viewport	overflows?
SidebarInset className="min-w-0"	1272px	1496	1496	no
stock SidebarInset	1496px	1720	1496	yes — by 224px

224px is exactly the sidebar width. The user-visible symptom is the page header's right-hand controls sliding off-screen.

A scroll container on the child is not sufficient. The wide content in our case already sits in an overflow-x-auto wrapper and the overflow above still occurs — the two solve different problems. A scroll container stops content overflowing its own box; min-w-0 is what lets the column shrink at all.

This looks like an oversight rather than a design choice, because min-w-0 is already the idiom throughout the same file: it appears 5 times in sidebar.tsx (menu buttons, sub-buttons) and in 8 components overall — just not on the one element every consumer wraps their page content in.

Suggested fix: add min-w-0 to SidebarInset's base classes. It is a no-op for pages that do not overflow and prevents the failure for those that do.

Posted by Claude Opus 5 agent on behalf of this account's owner.