diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index ccebc2c..bd6e6f9 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/src/admin/pages/InvoiceDetail.tsx
@@ -64,6 +64,7 @@ import {
   LoadingState,
   PageEnter,
   RichTextView,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -1114,14 +1115,7 @@ export default function InvoiceDetail() {
                 />
               </Box>
             </Box>
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                flexWrap: "wrap",
-              }}
-            >
+            <Box sx={headerActionsSx}>
               {hasPermission("invoices.export") && (
                 <Button
                   onClick={() => handleViewPdf(invoice.language || "cs")}
@@ -1660,14 +1654,7 @@ export default function InvoiceDetail() {
               )}
             </Box>
           </Box>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
+          <Box sx={headerActionsSx}>
             {isEdit && invoice && hasPermission("invoices.export") && (
               <Button
                 onClick={() => handleViewPdf(invoice.language || "cs")}
diff --git a/src/admin/pages/OfferDetail.tsx b/src/admin/pages/OfferDetail.tsx
index c45780c..6d39a2f 100644
--- a/src/admin/pages/OfferDetail.tsx
+++ b/src/admin/pages/OfferDetail.tsx
@@ -74,6 +74,7 @@ import {
   EmptyState,
   LoadingState,
   PageEnter,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -1118,14 +1119,7 @@ export default function OfferDetail() {
               {isCompleted && <StatusChip label="Dokončeno" color="success" />}
             </Box>
           </Box>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
+          <Box sx={headerActionsSx}>
             {isEdit && hasPermission("offers.export") && (
               <Button
                 onClick={handlePdf}
diff --git a/src/admin/pages/OrderDetail.tsx b/src/admin/pages/OrderDetail.tsx
index 9e3545c..d504af0 100644
--- a/src/admin/pages/OrderDetail.tsx
+++ b/src/admin/pages/OrderDetail.tsx
@@ -32,6 +32,7 @@ import {
   LoadingState,
   PageEnter,
   RichTextView,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -424,14 +425,7 @@ export default function OrderDetail() {
               />
             </Box>
           </Box>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap",
-            }}
-          >
+          <Box sx={headerActionsSx}>
             {order.invoice ? (
               <Button
                 component={RouterLink}
diff --git a/src/admin/pages/ProjectDetail.tsx b/src/admin/pages/ProjectDetail.tsx
index 6021d82..74f7537 100644
--- a/src/admin/pages/ProjectDetail.tsx
+++ b/src/admin/pages/ProjectDetail.tsx
@@ -29,6 +29,7 @@ import {
   ConfirmDialog,
   LoadingState,
   PageEnter,
+  headerActionsSx,
 } from "../ui";
 
 const API_BASE = "/api/admin";
@@ -320,14 +321,7 @@ export default function ProjectDetail() {
             </Box>
           </Box>
           {canEdit && (
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                flexWrap: "wrap",
-              }}
-            >
+            <Box sx={headerActionsSx}>
               <Button onClick={handleSave} disabled={saving}>
                 {saving ? "Ukládání..." : "Uložit"}
               </Button>
diff --git a/src/admin/pages/WarehouseInventoryDetail.tsx b/src/admin/pages/WarehouseInventoryDetail.tsx
index 0dd506b..b5b2631 100644
--- a/src/admin/pages/WarehouseInventoryDetail.tsx
+++ b/src/admin/pages/WarehouseInventoryDetail.tsx
@@ -24,6 +24,7 @@ import {
   PageHeader,
   PageEnter,
   ConfirmDialog,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -192,7 +193,7 @@ export default function WarehouseInventoryDetail() {
       <PageHeader
         title={s.session_number || "Inventura"}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/inventory"
diff --git a/src/admin/pages/WarehouseIssueDetail.tsx b/src/admin/pages/WarehouseIssueDetail.tsx
index 63a14c4..81babfa 100644
--- a/src/admin/pages/WarehouseIssueDetail.tsx
+++ b/src/admin/pages/WarehouseIssueDetail.tsx
@@ -24,6 +24,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -233,7 +234,7 @@ export default function WarehouseIssueDetail() {
             : undefined
         }
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/issues"
diff --git a/src/admin/pages/WarehouseItemDetail.tsx b/src/admin/pages/WarehouseItemDetail.tsx
index 851d28e..a8cba4e 100644
--- a/src/admin/pages/WarehouseItemDetail.tsx
+++ b/src/admin/pages/WarehouseItemDetail.tsx
@@ -29,6 +29,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -233,7 +234,7 @@ export default function WarehouseItemDetail() {
 
   // Edit / view mode action buttons
   const headerActions = canManage ? (
-    <Box sx={{ display: "flex", gap: 1 }}>
+    <Box sx={headerActionsSx}>
       {editing || isNew ? (
         <>
           {!isNew && (
@@ -362,7 +363,7 @@ export default function WarehouseItemDetail() {
         title={title}
         subtitle={subtitle}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/items"
diff --git a/src/admin/pages/WarehouseReceiptDetail.tsx b/src/admin/pages/WarehouseReceiptDetail.tsx
index 0649544..472888b 100644
--- a/src/admin/pages/WarehouseReceiptDetail.tsx
+++ b/src/admin/pages/WarehouseReceiptDetail.tsx
@@ -26,6 +26,7 @@ import {
   PageHeader,
   ConfirmDialog,
   PageEnter,
+  headerActionsSx,
   type DataColumn,
 } from "../ui";
 
@@ -301,7 +302,7 @@ export default function WarehouseReceiptDetail() {
         title={r.receipt_number || "Nový doklad"}
         subtitle={r.supplier?.name}
         actions={
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box sx={headerActionsSx}>
             <Button
               component={RouterLink}
               to="/warehouse/receipts"
diff --git a/src/admin/ui/PageHeader.tsx b/src/admin/ui/PageHeader.tsx
index bb6f1cd..bdc5e81 100644
--- a/src/admin/ui/PageHeader.tsx
+++ b/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>
   );
 }
diff --git a/src/admin/ui/index.ts b/src/admin/ui/index.ts
index 98fd371..45c71f8 100644
--- a/src/admin/ui/index.ts
+++ b/src/admin/ui/index.ts
@@ -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";