fix(ui): stop kit buttons from shrinking below their label (flexShrink: 0)
Follow-up to the nowrap fix: MUI's default flexShrink:1 was still squeezing buttons in flex rows below their content width, so with nowrap the label overflowed its padding and touched the button edges (measured: '+ Přidat položku' was 96px wide for 98px of content). Adding flexShrink:0 keeps each button at its natural width (now 131px, full padding restored). Verified via DOM measurement + visual on the offer detail. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,11 +14,12 @@ export default function Button<C extends ElementType = "button">({
|
|||||||
variant="contained"
|
variant="contained"
|
||||||
color="primary"
|
color="primary"
|
||||||
{...props}
|
{...props}
|
||||||
// Keep labels on one line — flex layouts otherwise shrink a button and
|
// Keep labels on one line and at their natural width — in flex rows MUI's
|
||||||
// wrap its text onto two lines, making the button tall. Callers can still
|
// default flexShrink:1 squeezes a button below its content, so the label
|
||||||
// override via their own sx.
|
// either wrapped to two lines or (with nowrap) overflowed its padding and
|
||||||
|
// hit the edges. nowrap + flexShrink:0 keeps buttons crisp. Caller sx wins.
|
||||||
sx={[
|
sx={[
|
||||||
{ whiteSpace: "nowrap" },
|
{ whiteSpace: "nowrap", flexShrink: 0 },
|
||||||
...(Array.isArray(sx) ? sx : sx ? [sx] : []),
|
...(Array.isArray(sx) ? sx : sx ? [sx] : []),
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user