From f0e6d18327f4f6afa8fa79907893de51bbaaeca8 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:17:11 +0100
Subject: [PATCH] fix: ou-tree field styling

---
 .../fields/OrganisationUnitField.module.css     |  8 ++++++++
 .../form/fields/OrganisationUnitField.tsx       | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/components/form/fields/OrganisationUnitField.module.css

diff --git a/src/components/form/fields/OrganisationUnitField.module.css b/src/components/form/fields/OrganisationUnitField.module.css
new file mode 100644
index 00000000..2b25b25b
--- /dev/null
+++ 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
index c65bff26..46bf1c6b 100644
--- 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>
     )
 }