From d91bef2a4de1234e227536c1acea0b097ee725ab Mon Sep 17 00:00:00 2001
From: balaji-jr <balaji.joshua1998@gmail.com>
Date: Thu, 5 Sep 2024 12:06:24 +0530
Subject: [PATCH] implement scroll view for cluster page sidebar

---
 src/pages/Systems/Cluster.tsx    | 14 +++++++++++---
 src/pages/Systems/ServerList.tsx | 10 ++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/pages/Systems/Cluster.tsx b/src/pages/Systems/Cluster.tsx
index b6beca6e..cd17b8de 100644
--- a/src/pages/Systems/Cluster.tsx
+++ b/src/pages/Systems/Cluster.tsx
@@ -3,12 +3,20 @@ import classes from './styles/Systems.module.css';
 import _ from 'lodash';
 import ServerList from './ServerList';
 import ServerDetail from './ServerDetails';
+import { PRIMARY_HEADER_HEIGHT } from '@/constants/theme';
 
 const Cluster = () => {
 	return (
-		<Stack className={classes.container} w="100%">
-			<Stack style={{ flexDirection: 'row', width: '100%' }} gap={0}>
-				<Stack style={{ width: '20%' }}>
+		<Stack
+			className={classes.container}
+			w="100%"
+			style={{
+				maxHeight: `calc(100vh - ${PRIMARY_HEADER_HEIGHT}px )`,
+				overflowY: 'scroll',
+				flex: 1,
+			}}>
+			<Stack style={{ flexDirection: 'row', width: '100%', overflow: 'hidden' }} gap={0}>
+				<Stack style={{ width: '20%', height: '100%' }}>
 					<ServerList />
 				</Stack>
 				<Divider orientation="vertical" />
diff --git a/src/pages/Systems/ServerList.tsx b/src/pages/Systems/ServerList.tsx
index 1194d07e..e292639d 100644
--- a/src/pages/Systems/ServerList.tsx
+++ b/src/pages/Systems/ServerList.tsx
@@ -1,4 +1,4 @@
-import { Pill, Stack, Text, ThemeIcon, Skeleton } from '@mantine/core';
+import { Pill, Stack, Text, ThemeIcon, Skeleton, ScrollArea } from '@mantine/core';
 import classes from './styles/Systems.module.css';
 import { IconActivity } from '@tabler/icons-react';
 import _ from 'lodash';
@@ -78,12 +78,14 @@ const List = () => {
 
 const ServerList = () => {
 	return (
-		<Stack className={classes.sectionContainerr}>
+		<>
 			<Stack style={{ padding: '1rem 1rem 0.5rem 1.5rem', flexDirection: 'row', alignItems: 'center' }} gap={8}>
 				<Text className={classes.leftSectionTitle}>Cluster Machines</Text>
 			</Stack>
-			<List />
-		</Stack>
+			<ScrollArea>
+				<List />
+			</ScrollArea>
+		</>
 	);
 };