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>

src/admin/ui/PageHeader.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import type { SxProps, Theme } from "@mui/material/styles";
 
 export interface PageHeaderProps {
   title: string;
@@ -8,6 +9,26 @@ export interface PageHeaderProps {
   actions?: ReactNode;
 }
 
+/**
+ * Shared sx for a header action-button group. On mobile each button gets its
+ * own full-width row (column + stretch); from `sm` up it's the usual right-
+ * aligned wrapping row. Use on the Box that wraps the header's action Buttons
+ * (page headers + detail-page headers) so the mobile layout is identical
+ * everywhere — no more buttons wrapping into a ragged grid on phones.
+ */
+export const headerActionsSx: SxProps<Theme> = {
+  display: "flex",
+  flexDirection: { xs: "column", sm: "row" },
+  alignItems: { xs: "stretch", sm: "center" },
+  justifyContent: { sm: "flex-end" },
+  flexWrap: { sm: "wrap" },
+  gap: 1,
+  width: { xs: "100%", sm: "auto" },
+  // Some detail-page headers keep a StatusChip in this same group — keep it at
+  // its natural size on mobile instead of stretching it into a full-width bar.
+  "& > .MuiChip-root": { alignSelf: { xs: "flex-start", sm: "auto" } },
+};
+
 /**
  * Standard page header: title (+ optional subtitle) on the left,
  * action controls on the right. No framer-motion — pages add their own entrance.
@@ -36,19 +57,7 @@ export default function PageHeader({
           </Typography>
         )}
       </Box>
-      {actions && (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
-            gap: 1,
-            flexWrap: "wrap",
-          }}
-        >
-          {actions}
-        </Box>
-      )}
+      {actions && <Box sx={headerActionsSx}>{actions}</Box>}
     </Box>
   );
 }