From 71443c7fb6834d6fb3bb8a26d50af05688a3b52d Mon Sep 17 00:00:00 2001
From: Pim Hutting <p.r.p.hutting@students.uu.nl>
Date: Thu, 8 Jan 2026 15:19:38 +0100
Subject: [PATCH] feat: added scroll bar to simple program

note that it will take quite a lot of items
for the simple prog to be filled up, only when it's
overflown the scroll bar will appear

ref: N25B-400
---
 .../MonitoringPage/MonitoringPage.module.css  | 24 ++++++++++++++++++-
 src/pages/MonitoringPage/MonitoringPage.tsx   |  6 +----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css
index 451b229..1590ad7 100644
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -85,9 +85,31 @@
   background: #f9f9f9;
   border: 1px solid #ddd;
   padding: 1rem;
-  display: flex;
+  display: flex;         
   flex-direction: column;
   box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
+  
+  height: 250px;   
+}
+
+.phaseBox ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  overflow-y: auto;       
+  flex-grow: 1;          
+  
+
+}
+
+.phaseBox ul::-webkit-scrollbar {
+  width: 6px;
+}
+
+.phaseBox ul::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
 }
 
 .phaseOverviewText {
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 3d354ec..e63eaee 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -190,11 +190,7 @@ const MonitoringPage: React.FC = () => {
         <StatusList title="Goals" items={goals} type="goal" />
         <StatusList title="Triggers" items={triggers} type="trigger" />
         <StatusList title="Norms" items={norms} type="norm" />
-        <StatusList 
-        title="Conditional Norms" 
-        items={conditionalNorms} 
-        type="cond_norm" 
-      />
+        <StatusList title="Conditional Norms" items={conditionalNorms} type="cond_norm"/>
       </main>
 
       {/* LOGS */}