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

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 {

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 */}