From 1e155f6ffbb3f2f15b674503a7e506c85930c5a8 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 16:05:32 +0200
Subject: [PATCH] fix(ui): wrap action-button groups so they don't clip on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since kit buttons now keep their natural width (flexShrink:0 + nowrap), a row of them can't shrink — so button groups that were flexShrink:0 with no wrap got clipped on phones (the page has overflow-x:hidden). The draft-concept Alert actions (Offers + Invoices) and the shared PageHeader actions now use flexWrap:wrap and drop flexShrink:0, so the group conforms to the available width and its buttons wrap onto stacked lines. Verified at 430px: the Offers draft alert no longer overflows (buttons stack), page has no horizontal scroll.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/pages/Invoices.tsx | 8 +++++++-
 src/admin/pages/Offers.tsx   | 8 +++++++-
 src/admin/ui/PageHeader.tsx  | 8 +++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/admin/pages/Invoices.tsx b/src/admin/pages/Invoices.tsx
index 7f067e9..9ed4137 100644
--- a/src/admin/pages/Invoices.tsx
+++ b/src/admin/pages/Invoices.tsx
@@ -794,7 +794,13 @@ export default function Invoices() {
                         : "—"}
                     </Typography>
                   </Box>
-                  <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      gap: 1,
+                      flexWrap: "wrap",
+                    }}
+                  >
                     <Button
                       component={RouterLink}
                       to="/invoices/new"
diff --git a/src/admin/pages/Offers.tsx b/src/admin/pages/Offers.tsx
index 03f1023..f11235b 100644
--- a/src/admin/pages/Offers.tsx
+++ b/src/admin/pages/Offers.tsx
@@ -801,7 +801,13 @@ export default function Offers() {
                   {draft.form.currency ? ` · ${draft.form.currency}` : ""}
                 </Typography>
               </Box>
-              <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
+              <Box
+                sx={{
+                  display: "flex",
+                  gap: 1,
+                  flexWrap: "wrap",
+                }}
+              >
                 <Button
                   component={RouterLink}
                   to="/offers/new"
diff --git a/src/admin/ui/PageHeader.tsx b/src/admin/ui/PageHeader.tsx
index e38d59e..bb6f1cd 100644
--- a/src/admin/ui/PageHeader.tsx
+++ b/src/admin/ui/PageHeader.tsx
@@ -38,7 +38,13 @@ export default function PageHeader({
       </Box>
       {actions && (
         <Box
-          sx={{ display: "flex", alignItems: "center", gap: 1, flexShrink: 0 }}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: 1,
+            flexWrap: "wrap",
+          }}
         >
           {actions}
         </Box>