fix(ui): stack detail-page header action buttons one-per-row on mobile
Detail-page headers put their action buttons in a flex row with flexWrap:"wrap", so on a phone the 2-4 buttons (Potvrzení / Zahájit realizaci / Smazat, etc.) wrapped into a ragged grid. New shared `headerActionsSx` (ui/PageHeader): on xs it's a full-width column (each button its own full-width row); from sm up it's the usual right-aligned wrapping row — desktop unchanged. A StatusChip kept in the same group stays its natural size (alignSelf) instead of stretching. Applied to PageHeader's own actions slot and every detail-page header action group: Order/Offer/Invoice (both views)/Project + the Warehouse Receipt/Issue/Item/Inventory detail headers. Verified in Chrome at 430px on OrderDetail: the group is flexDirection column with all three buttons at the same x, full-width, stacked. tsc -b --noEmit, npm run build, vitest 152/152 clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -18,7 +18,7 @@ export { default as Pagination } from "./Pagination";
|
||||
export { default as DateField } from "./DateField";
|
||||
export { default as MonthField } from "./MonthField";
|
||||
export { default as TimeField } from "./TimeField";
|
||||
export { default as PageHeader } from "./PageHeader";
|
||||
export { default as PageHeader, headerActionsSx } from "./PageHeader";
|
||||
export { default as EmptyState } from "./EmptyState";
|
||||
export { default as LoadingState } from "./LoadingState";
|
||||
export { default as FilterBar } from "./FilterBar";
|
||||
|
||||
Reference in New Issue
Block a user