From a2e0a09061869bb3029f26144465609d5c5bc66e Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 22 Nov 2024 09:49:11 +0100
Subject: [PATCH] fix: fix padding/margin in form

---
 .../form/attributes/CustomAttributes.tsx        | 17 +++++++++--------
 .../form/GeometryFields.module.css              |  5 +++++
 .../organisationUnits/form/GeometryFields.tsx   |  2 ++
 3 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/organisationUnits/form/GeometryFields.module.css

diff --git a/src/components/form/attributes/CustomAttributes.tsx b/src/components/form/attributes/CustomAttributes.tsx
index 94ddb740..08d2e2b4 100644
--- a/src/components/form/attributes/CustomAttributes.tsx
+++ b/src/components/form/attributes/CustomAttributes.tsx
@@ -3,6 +3,7 @@ import { InputFieldFF, SingleSelectFieldFF, TextAreaFieldFF } from '@dhis2/ui'
 import * as React from 'react'
 import { Field as FieldRFF, useFormState } from 'react-final-form'
 import {
+    StandardFormField,
     StandardFormSection,
     StandardFormSectionDescription,
     StandardFormSectionTitle,
@@ -38,7 +39,7 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
         }
 
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={SingleSelectFieldFF}
                     required={required}
@@ -47,13 +48,13 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
                     name={name}
                     options={options}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'TEXT') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={InputFieldFF}
                     required={required}
@@ -61,13 +62,13 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'LONG_TEXT') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={TextAreaFieldFF}
                     required={required}
@@ -75,13 +76,13 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
 
     if (attribute.valueType === 'GEOJSON') {
         return (
-            <StandardFormSection key={attribute.id}>
+            <StandardFormField key={attribute.id}>
                 <FieldRFF
                     component={TextAreaFieldFF}
                     required={required}
@@ -89,7 +90,7 @@ function CustomAttribute({ attribute, index }: CustomAttributeProps) {
                     label={attribute.displayFormName}
                     name={name}
                 />
-            </StandardFormSection>
+            </StandardFormField>
         )
     }
     // @TODO: Verify that all value types have been covered!
diff --git a/src/pages/organisationUnits/form/GeometryFields.module.css b/src/pages/organisationUnits/form/GeometryFields.module.css
new file mode 100644
index 00000000..554ece93
--- /dev/null
+++ b/src/pages/organisationUnits/form/GeometryFields.module.css
@@ -0,0 +1,5 @@
+.coordinateField > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp16);
+}
diff --git a/src/pages/organisationUnits/form/GeometryFields.tsx b/src/pages/organisationUnits/form/GeometryFields.tsx
index 1ffa91cd..80055054 100644
--- a/src/pages/organisationUnits/form/GeometryFields.tsx
+++ b/src/pages/organisationUnits/form/GeometryFields.tsx
@@ -3,6 +3,7 @@ import { Field, InputField } from '@dhis2/ui'
 import React from 'react'
 import { useField } from 'react-final-form'
 import { getConstantTranslation } from '../../../lib'
+import css from './GeometryFields.module.css'
 
 export function GeometryFields() {
     const fieldName = 'geometry'
@@ -26,6 +27,7 @@ export function GeometryFields() {
     return !input.value || input.value?.type === 'Point' ? (
         <>
             <Field
+                className={css.coordinateField}
                 name={fieldName}
                 error={meta.touched && !!meta.error}
                 validationText={