From 5c5afe2427a090e218d937aaf1bbb3a8a7439384 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 10 Sep 2024 10:07:22 +0200
Subject: [PATCH] feat: use a uui-scroll-container for scroll

---
 .../sysinfo/components/sysinfo.element.ts     | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/sysinfo.element.ts b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/sysinfo.element.ts
index cbc092520d..6321ed32bb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/sysinfo.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/sysinfo/components/sysinfo.element.ts
@@ -77,17 +77,19 @@ export class UmbSysinfoElement extends UmbModalBaseElement {
 						() => html`<uui-loader-bar></uui-loader-bar>`,
 						() => html`
 							<uui-box id="sysinfo-table">
-								<uui-table aria-label="System information">
-									<uui-table-column style="width: 20%"></uui-table-column>
-									<uui-table-column style="width: 80%"></uui-table-column>
+								<uui-scroll-container id="container">
+									<uui-table aria-label="System information">
+										<uui-table-column style="width: 20%"></uui-table-column>
+										<uui-table-column style="width: 80%"></uui-table-column>
 
-									<uui-table-head>
-										<uui-table-head-cell>Name</uui-table-head-cell>
-										<uui-table-head-cell>Data</uui-table-head-cell>
-									</uui-table-head>
+										<uui-table-head>
+											<uui-table-head-cell>Name</uui-table-head-cell>
+											<uui-table-head-cell>Data</uui-table-head-cell>
+										</uui-table-head>
 
-									${this.#renderServerKeyValues()}
-								</uui-table>
+										${this.#renderServerKeyValues()}
+									</uui-table>
+								</uui-scroll-container>
 							</uui-box>
 						`,
 					)}
@@ -139,11 +141,12 @@ ${serverKeyValues}`;
 	static override readonly styles = [
 		UmbTextStyles,
 		css`
+			#container {
+				max-height: 300px;
+			}
+
 			#sysinfo-table {
 				--uui-box-default-padding: 0;
-				width: 100%;
-				max-height: 300px;
-				overflow: auto;
 			}
 
 			.data-cell {