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:
BOHA
2026-06-07 14:10:31 +02:00
parent 9278d48a6d
commit bf5d38df14

View File

@@ -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] : []),
]} ]}
/> />