From bfd2c59ad350d3bae4bd9bb2c66914146a1d4ddf Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Wed, 10 Jun 2026 20:21:29 +0200
Subject: [PATCH] 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     | 22 ++++++++++++++++++++--
 src/admin/pages/IssuedOrderDetail.tsx | 11 ++++++++++-
 src/admin/pages/OfferDetail.tsx       | 11 ++++++++++-
 src/admin/theme.ts                    |  8 +++++++-
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/admin/pages/InvoiceDetail.tsx b/src/admin/pages/InvoiceDetail.tsx
index 8eef025..6656079 100644
--- a/src/admin/pages/InvoiceDetail.tsx
+++ b/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"
diff --git a/src/admin/pages/IssuedOrderDetail.tsx b/src/admin/pages/IssuedOrderDetail.tsx
index 843f4f7..f019ef4 100644
--- a/src/admin/pages/IssuedOrderDetail.tsx
+++ b/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"
diff --git a/src/admin/pages/OfferDetail.tsx b/src/admin/pages/OfferDetail.tsx
index 4f99121..c8fcd1f 100644
--- a/src/admin/pages/OfferDetail.tsx
+++ b/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"
diff --git a/src/admin/theme.ts b/src/admin/theme.ts
index 82e35ea..2b385eb 100644
--- a/src/admin/theme.ts
+++ b/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 },