Use row to improve fields layout

CodeForAfrica · Nov 13, 2024 · d06ca27 · d06ca27
1 parent 053e206
commit d06ca27
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js b/apps/climatemappedafrica/src/payload/fields/HURUmapURL.js
@@ -53,6 +53,11 @@ function HURUmapURL(props) {
     "div",
     {
       id: "hurumap-url-wrapper",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+      },
     },
     createElement(TextInput, {
       ...props,

diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js
@@ -41,6 +41,7 @@ const Profile = {
           Field: ProfileSelect,
         },
         condition: (_, siblingData) => !!siblingData?.urlValid,
+        width: "50%",
       },
     },
     {
@@ -54,25 +55,30 @@ const Profile = {
       },
       fields: [
         {
-          name: "code",
-          type: "text",
-          label: {
-            en: "Location Code",
-          },
-          required: true,
-          hasMany: false,
-          defaultValue: "af",
-          admin: {
-            components: {
-              Field: LocationSelect,
+          type: "row",
+          fields: [
+            {
+              name: "code",
+              type: "text",
+              label: {
+                en: "Location Code",
+              },
+              required: true,
+              hasMany: false,
+              defaultValue: "af",
+              admin: {
+                components: {
+                  Field: LocationSelect,
+                },
+              },
             },
-          },
-        },
-        {
-          name: "center",
-          label: "Center Point",
-          type: "point",
-          defaultValue: [20.0, 4.25],
+            {
+              name: "center",
+              label: "Center Point",
+              type: "point",
+              defaultValue: [20.0, 4.25],
+            },
+          ],
         },
         {
           name: "hasData",
@@ -100,6 +106,7 @@ const Profile = {
       required: true,
       admin: {
         description: "The page to show the HURUmap profile on.",
+        width: "50%",
       },
     },
   ],