fix(ui): keep Button labels on one line (whiteSpace: nowrap)
In flex rows (e.g. the add-item/add-section buttons next to a 'Ze šablony…' select on OfferDetail/OrderConfirmationModal/InvoiceDetail), flexbox shrank a button below its text width and wrapped the label onto two lines, making the button tall. The kit Button now defaults to whiteSpace: nowrap (merged with any caller sx, still overridable), so labels stay single-line app-wide. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,8 +5,22 @@ import type { ElementType } from "react";
|
||||
* Accepts `component` + any extra props the component requires
|
||||
* (e.g. `component={RouterLink} to="/foo"` or `component="a" href="…"`).
|
||||
*/
|
||||
export default function Button<C extends ElementType = "button">(
|
||||
props: ButtonProps<C, { component?: C }>,
|
||||
) {
|
||||
return <MuiButton variant="contained" color="primary" {...props} />;
|
||||
export default function Button<C extends ElementType = "button">({
|
||||
sx,
|
||||
...props
|
||||
}: ButtonProps<C, { component?: C }>) {
|
||||
return (
|
||||
<MuiButton
|
||||
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.
|
||||
sx={[
|
||||
{ whiteSpace: "nowrap" },
|
||||
...(Array.isArray(sx) ? sx : sx ? [sx] : []),
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user