From 7fbb161fdffc9a9326e119c83ff4cf90a6f2ebab Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:58:59 +0100
Subject: [PATCH] fix(transfer): apply margin to first and last items, remove
 container padding

---
 components/transfer/src/options-container.js |  2 --
 components/transfer/src/transfer-option.js   | 10 +++++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/transfer/src/options-container.js b/components/transfer/src/options-container.js
index 26690b152..9374e81bc 100644
--- a/components/transfer/src/options-container.js
+++ b/components/transfer/src/options-container.js
@@ -1,4 +1,3 @@
-import { spacers } from '@dhis2/ui-constants'
 import { CircularLoader } from '@dhis2-ui/loader'
 import PropTypes from 'prop-types'
 import React, { Fragment, useRef } from 'react'
@@ -69,7 +68,6 @@ export const OptionsContainer = ({
             <style jsx>{`
                 .optionsContainer {
                     flex-grow: 1;
-                    padding: ${spacers.dp4} 0;
                     position: relative;
                     overflow: hidden;
                 }
diff --git a/components/transfer/src/transfer-option.js b/components/transfer/src/transfer-option.js
index 58a16c5a9..3b91b1515 100644
--- a/components/transfer/src/transfer-option.js
+++ b/components/transfer/src/transfer-option.js
@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
+import { colors, spacers } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
@@ -66,6 +66,14 @@ export const TransferOption = ({
                     color: ${colors.grey600};
                     cursor: not-allowed;
                 }
+
+                div:first-child {
+                    margin-block-start: ${spacers.dp4};
+                }
+
+                div:last-child {
+                    margin-block-end: ${spacers.dp4};
+                }
             `}</style>
         </div>
     )