From c8719c40d86f5653e2782ab147f07ab394654ba8 Mon Sep 17 00:00:00 2001
From: Nikola Stojanovic <68916411+dzonidoo@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:37:54 +0200
Subject: [PATCH] Event and Planning profile editor doesn't display Groups in
 Fields (#2074)

* add variant prop on toggleBox component

* scrolable list style
---
 .../components/ContentProfiles/FieldTab/FieldList.tsx  |  1 +
 .../ContentProfiles/GroupTab/GroupEditor.tsx           |  1 +
 client/components/SortItems/style.scss                 | 10 ++++++++++
 3 files changed, 12 insertions(+)

diff --git a/client/components/ContentProfiles/FieldTab/FieldList.tsx b/client/components/ContentProfiles/FieldTab/FieldList.tsx
index 137a8fae6..5f3c635fc 100644
--- a/client/components/ContentProfiles/FieldTab/FieldList.tsx
+++ b/client/components/ContentProfiles/FieldTab/FieldList.tsx
@@ -194,6 +194,7 @@ export class FieldList extends React.PureComponent<IProps> {
             this.renderList()
         ) : (
             <ToggleBox
+                variant="simple"
                 key={this.props.group._id}
                 title={getProfileGroupNameTranslated(this.props.group)}
                 className="toggle-box--circle toggle-box--no-line"
diff --git a/client/components/ContentProfiles/GroupTab/GroupEditor.tsx b/client/components/ContentProfiles/GroupTab/GroupEditor.tsx
index 75abd5427..9ec42e9d8 100644
--- a/client/components/ContentProfiles/GroupTab/GroupEditor.tsx
+++ b/client/components/ContentProfiles/GroupTab/GroupEditor.tsx
@@ -127,6 +127,7 @@ export class GroupEditor extends React.PureComponent<IProps> {
                             </div>
                             {!this.props.languages?.length ? null : (
                                 <ToggleBox
+                                    variant="simple"
                                     title={gettext('Name Translations')}
                                     className="toggle-box--circle"
                                     initiallyOpen={true}
diff --git a/client/components/SortItems/style.scss b/client/components/SortItems/style.scss
index 6b7a4ed73..5488012c2 100644
--- a/client/components/SortItems/style.scss
+++ b/client/components/SortItems/style.scss
@@ -12,3 +12,13 @@
 .sortable-list__item button {
     padding: 0px !important;
 }
+
+.sd-list-item-group {
+    padding: 4px 4px 18px 4px;
+}
+
+.sd-list-item-group--space-between-items .sortable-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap--small);
+}