From c5da4177c4d9ce39e2f2e2dfcc1f91a65f4e5035 Mon Sep 17 00:00:00 2001
From: brios <127139797+balazs-szucs@users.noreply.github.com>
Date: Sat, 29 Aug 2026 23:22:34 +0200
Subject: [PATCH] refactor(ui): improve button layouts and modal sizing of
 formFill (#7509)

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
---
 .../editor/src/core/tools/formFill/FormSaveBar.tsx   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx b/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx
index 48ded3045f..1724d5e1ea 100644
--- a/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx
+++ b/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx
@@ -117,8 +117,10 @@ export function FormSaveBar({
             withBorder
             style={{
               pointerEvents: "auto",
-              minWidth: "320px",
-              maxWidth: "420px",
+              // Fill the viewport on small screens instead of overflowing the
+              // left edge with a fixed 320px+ minimum width.
+              width: "min(420px, calc(100vw - 2rem))",
+              maxWidth: "100%",
               overflow: "hidden",
             }}
           >
@@ -168,7 +170,7 @@ export function FormSaveBar({
               </Group>
 
               {isDirty && (
-                <Group gap="xs" mt="xs">
+                <Group gap="xs" mt="xs" wrap="wrap">
                   <Button
                     size="sm"
                     variant="secondary"
@@ -176,7 +178,7 @@ export function FormSaveBar({
                     loading={applying}
                     disabled={saving}
                     onClick={handleApply}
-                    style={{ flex: 1 }}
+                    style={{ flex: "1 1 10rem", minWidth: 0 }}
                   >
                     {t("viewer.formBar.apply", "Apply Changes")}
                   </Button>
@@ -186,7 +188,7 @@ export function FormSaveBar({
                     loading={saving}
                     disabled={applying || policyEnforcing}
                     onClick={handleDownload}
-                    style={{ flex: 1 }}
+                    style={{ flex: "1 1 10rem", minWidth: 0 }}
                   >
                     {t("viewer.formBar.download", "Download PDF")}
                   </Button>