fix: ou-tree field styling

dhis2 · Dec 17, 2024 · f0e6d18 · f0e6d18
1 parent d153156
commit f0e6d18
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/form/fields/OrganisationUnitField.module.css b/src/components/form/fields/OrganisationUnitField.module.css
@@ -0,0 +1,8 @@
+.OrganisationUnitTreeWrapper {
+    padding: var(--spacers-dp4);
+    border: 1px solid var(--colors-grey300);
+    border-radius: 3px;
+    width: 640px;
+    max-height: 800px;
+    overflow: auto;
+}
diff --git a/src/components/form/fields/OrganisationUnitField.tsx b/src/components/form/fields/OrganisationUnitField.tsx
@@ -7,6 +7,7 @@ import {
 import React from 'react'
 import { useField } from 'react-final-form'
 import { useCurrentUserRootOrgUnits } from '../../../lib/user/currentUserStore'
+import classes from './OrganisationUnitField.module.css'
 
 type OrganisationUnitFieldProps = {
     name?: string
@@ -66,13 +67,15 @@ export const OrganisationUnitField = ({
             error={meta.touched && meta.error}
             validationText={meta.touched && meta.error}
         >
-            <OrganisationUnitTree
-                roots={rootIds}
-                singleSelection={singleSelection}
-                onChange={handleChange}
-                selected={selectedPaths}
-                initiallyExpanded={rootIds}
-            />
+            <div className={classes.OrganisationUnitTreeWrapper}>
+                <OrganisationUnitTree
+                    roots={rootIds}
+                    singleSelection={singleSelection}
+                    onChange={handleChange}
+                    selected={selectedPaths}
+                    initiallyExpanded={rootIds}
+                />
+            </div>
         </Field>
     )
 }