Stop the tab content overflowing and touching the walls

Fixkamo-internal
Ya
7 Agosti 2026, 04:29 UTC
Mwandishi
kamo
Ahadi ya
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.

Mabadiliko yote

Je, unaona nini kuhusu usafiri?

Kila moja ya hizi updates ardhi katika nafasi yako ya kazi moja kwa moja. Kuanza bure na kuangalia kukua wiki baada ya wiki.

Kuwa Huru MileleMtazamo wa bei