From cf0d35ee026b4ffdf155ae491edc5b7eeaf1ede0 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 18 Nov 2022 10:06:46 +0100
Subject: [PATCH] fix overflow on the modal sidebars

---
 .../fields-viewer/fields-settings.element.ts  | 31 +++++++++++--------
 .../fields-viewer/fields-viewer.element.ts    |  3 +-
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
index ab3ac26523..fbe99cdee6 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
@@ -15,7 +15,8 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 		css`
 			:host {
 				display: relative;
-			} /*
+			}
+
 			uui-dialog-layout {
 				display: flex;
 				flex-direction: column;
@@ -26,6 +27,7 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 				padding: var(--uui-size-space-5);
 				box-sizing: border-box;
 			}
+
 			uui-scroll-container {
 				line-height: 0;
 				display: grid;
@@ -33,8 +35,9 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
-			}*/
+			}
 			div {
+				margin-top: var(--uui-size-space-5);
 				display: flex;
 				flex-direction: row-reverse;
 			}
@@ -65,17 +68,19 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 		if (this._fields) {
 			return html`
 				<uui-dialog-layout headline="Show fields">
-					<uui-scroll-container id="icon-selection">
-						${Object.values(this._fields).map((field, index) => {
-							return html`<uui-toggle
-									name="${field.name}"
-									label="${field.name}"
-									.checked="${field.exposed}"
-									@change="${() => {
-										this._fields ? (this._fields[index].exposed = !field.exposed) : '';
-									}}"></uui-toggle>
-								<br />`;
-						})}
+					<uui-scroll-container id="field-settings">
+						<span>
+							${Object.values(this._fields).map((field, index) => {
+								return html`<uui-toggle
+										name="${field.name}"
+										label="${field.name}"
+										.checked="${field.exposed}"
+										@change="${() => {
+											this._fields ? (this._fields[index].exposed = !field.exposed) : '';
+										}}"></uui-toggle>
+									<br />`;
+							})}
+						</span>
 					</uui-scroll-container>
 					<div>
 						<uui-button look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
index 872bb83e7e..a13f76472b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
@@ -31,6 +31,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 				min-height: 0;
 			}
 			div {
+				margin-top: var(--uui-size-space-5);
 				display: flex;
 				flex-direction: row-reverse;
 			}
@@ -45,7 +46,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 		if (this.data) {
 			return html`
 				<uui-dialog-layout class="uui-text" headline="${this.data.name}">
-					<uui-scroll-container id="icon-selection">
+					<uui-scroll-container id="field-viewer">
 						<uui-table>
 							<uui-table-head>
 								<uui-table-head-cell> Field </uui-table-head-cell>