Stop the tab content overflowing and touching the walls

Fixkamo-internal
Shipped
August 7, 2026 at 4:29 AM UTC
Author
kamo
Commit
c2132dc

Two causes, both mine. No padding. TabPanel deliberately supplies none — every tab pads itself, and I had not. The shell now uses p:{xs:3,md:4}, matching MyAccountTab, so headings and cards no longer sit flush against the edges. Missing minWidth:0. This is what actually pushed content past the right edge. A flex child defaults to min-width:auto, so it refuses to shrink below the intrinsic width of its widest descendant — here a table — and grows the container instead. TabPanel sets overflowX:hidden, so that growth is CLIPPED rather than scrolled, which is why titles and controls ran off the side with no scrollbar to reveal them. Adding minWidth:0 to the shell and to all four panel roots lets them shrink; MUI's TableContainer is already overflow-x:auto, so a wide table now scrolls inside its own card instead of dragging the page with it. The tab bar clipping the last tab is not part of this: it already has overflowX:auto with flexShrink:0 per tab, so it scrolls by design.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing