fix: fix padding/margin in form

dhis2 · Nov 22, 2024 · a2e0a09 · a2e0a09
1 parent b00cae2
commit a2e0a09
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git 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,49 +48,49 @@ 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}
                     inputWidth={inputWidth}
                     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}
                     inputWidth={inputWidth}
                     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}
                     inputWidth={inputWidth}
                     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
@@ -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
@@ -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={