From e9378e7af7bdb6fe4601f67568d78bbad96e2012 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Fri, 25 Aug 2023 15:33:18 +0200
Subject: [PATCH] fix payloadcms fields (#924)

Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>
---
 .changeset/hungry-clocks-move.md               |  5 +++++
 .../payloadcms/payloadcms-config-form.tsx      | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/hungry-clocks-move.md

diff --git a/.changeset/hungry-clocks-move.md b/.changeset/hungry-clocks-move.md
new file mode 100644
index 0000000..e7d259d
--- /dev/null
+++ b/.changeset/hungry-clocks-move.md
@@ -0,0 +1,5 @@
+---
+"saleor-app-cms-v2": patch
+---
+
+Fix PayloadCMS form where two inputs were stuck together without a margin. Now, they are placed in two columns
diff --git a/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx b/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx
index e3d0743..59b5339 100644
--- a/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx
+++ b/apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx
@@ -82,17 +82,19 @@ const PureForm = ({ defaultValues, onSubmit, onDelete }: PureFormProps) => {
           >
             Read more in Payload docs
           </TextLink>
-          <Text as="p" marginBottom={4}>
+          <Text as="p" marginBottom={6}>
             If your API is open (e.g. for development purposes) leave both fields empty.
           </Text>
 
-          <Input
-            control={control}
-            name="authenticatedUserSlug"
-            label="Authenticated user slug"
-            placeholder="e.g. apps"
-          />
-          <Input control={control} name="authToken" type="password" label="User API Key" />
+          <Box display="grid" gap={4} gridTemplateColumns={2}>
+            <Input
+              control={control}
+              name="authenticatedUserSlug"
+              label="Authenticated user slug"
+              placeholder="e.g. apps"
+            />
+            <Input control={control} name="authToken" type="password" label="User API Key" />
+          </Box>
         </Box>
       </Box>
       <Box display={"grid"} gap={4} marginY={4}>