implement scroll view for cluster page sidebar

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" />

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>
+		</>
 	);
 };