From bf5d38df1408f9f4734e643e45b469b50858b989 Mon Sep 17 00:00:00 2001 From: BOHA Date: Sun, 7 Jun 2026 14:10:31 +0200 Subject: [PATCH] fix(ui): stop kit buttons from shrinking below their label (flexShrink: 0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/admin/ui/Button.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/admin/ui/Button.tsx b/src/admin/ui/Button.tsx index e661473..259b1ed 100644 --- a/src/admin/ui/Button.tsx +++ b/src/admin/ui/Button.tsx @@ -14,11 +14,12 @@ export default function Button({ variant="contained" color="primary" {...props} - // Keep labels on one line — flex layouts otherwise shrink a button and - // wrap its text onto two lines, making the button tall. Callers can still - // override via their own sx. + // Keep labels on one line and at their natural width — in flex rows MUI's + // default flexShrink:1 squeezes a button below its content, so the label + // 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={[ - { whiteSpace: "nowrap" }, + { whiteSpace: "nowrap", flexShrink: 0 }, ...(Array.isArray(sx) ? sx : sx ? [sx] : []), ]} />