fix(ui): detail-form headers no longer overflow on mobile

Two causes: theme h4 had no responsive size (desktop 2.125rem on
phones - now 1.5rem under 600px, applies to all page headlines), and
the Zpet+title header row had no flexWrap so long document titles
pushed past the viewport (issued orders, offers, both invoice views).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/admin/pages/InvoiceDetail.tsx

@@ -1163,7 +1163,16 @@ export default function InvoiceDetail() {
               mb: 3,
             }}
           >
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+            {/* flexWrap: long document titles must drop below the Zpět button
+                on phones instead of overflowing the viewport. */}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                flexWrap: "wrap",
+              }}
+            >
               <Button
                 component={RouterLink}
                 to="/invoices?tab=issued"
@@ -1724,7 +1733,16 @@ export default function InvoiceDetail() {
             mb: 3,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          {/* flexWrap: long document titles must drop below the Zpět button
+              on phones instead of overflowing the viewport. */}
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              flexWrap: "wrap",
+            }}
+          >
             <Button
               component={RouterLink}
               to="/invoices?tab=issued"

src/admin/pages/IssuedOrderDetail.tsx

@@ -573,7 +573,16 @@ export default function IssuedOrderDetail() {
           mb: 3,
         }}
       >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+        {/* flexWrap: long document titles must drop below the Zpět button on
+            phones instead of overflowing the viewport. */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
+            flexWrap: "wrap",
+          }}
+        >
           <Button
             component={RouterLink}
             to="/orders?tab=vydane"

src/admin/pages/OfferDetail.tsx

@@ -620,7 +620,16 @@ export default function OfferDetail() {
             mb: 3,
           }}
         >
-          <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          {/* flexWrap: long document titles must drop below the Zpět button
+              on phones instead of overflowing the viewport. */}
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              flexWrap: "wrap",
+            }}
+          >
             <Button
               component={RouterLink}
               to="/offers"

src/admin/theme.ts

@@ -58,7 +58,13 @@ export const theme = createTheme({
     h1: { fontFamily: FONT_HEADING, fontWeight: 800 },
     h2: { fontFamily: FONT_HEADING, fontWeight: 800 },
     h3: { fontFamily: FONT_HEADING, fontWeight: 800 },
-    h4: { fontFamily: FONT_HEADING, fontWeight: 700 },
+    h4: {
+      fontFamily: FONT_HEADING,
+      fontWeight: 700,
+      // Page/detail headlines: MUI's default 2.125rem overflows phone
+      // viewports (long document titles + number). Scale down on xs only.
+      "@media (max-width:600px)": { fontSize: "1.5rem" },
+    },
     h5: { fontFamily: FONT_HEADING, fontWeight: 700 },
     h6: { fontFamily: FONT_HEADING, fontWeight: 700 },
     button: { textTransform: "none", fontWeight: 600 },