chore: made activatable elements clickable

ref: N25B-400

src/pages/MonitoringPage/Components.tsx

@@ -131,12 +131,11 @@ export const StatusList: React.FC<StatusListProps> = ({
       <h3>{title}</h3>
       <ul>
         {items.map((item, idx) => {
+          if (item.id === undefined) return null;
           const isActive = !!activeIds[item.id];
           const showIndicator = type !== 'norm';
           const canOverride = showIndicator && !isActive;
 
-          // HIGHLIGHT LOGIC: 
-          // If this is the "Goals" list, check if the current index matches
           const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
 
           const handleOverrideClick = () => {
@@ -148,7 +147,7 @@ export const StatusList: React.FC<StatusListProps> = ({
             <li key={item.id ?? idx} className={styles.statusItem}>
               {showIndicator && (
                 <span 
-                  className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
+                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
                   onClick={handleOverrideClick}
                 >
                   {isActive ? "✔️" : "❌"}

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -156,6 +156,37 @@
   content: '✔️ ';
 }
 
+.statusIndicator {
+  display: inline-block;
+  margin-right: 10px;
+  user-select: none; 
+  transition: transform 0.1s ease;
+  font-size: 1.1rem;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  transform: scale(1.2);
+}
+
+.active {
+  cursor: default; 
+  opacity: 1;
+}
+
+.statusItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+
+.itemDescription {
+  line-height: 1.4;
+}
+
 /* LOGS */
 .logs {
   grid-area: logs;

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -73,6 +73,7 @@ const MonitoringPage: React.FC = () => {
       
       data.norms.forEach((normUpdate: { id: string; active: boolean }) => {
         nextState[normUpdate.id] = normUpdate.active;
+        console.log(`Conditional norm ${normUpdate.id} set to active: ${normUpdate.active}`);
       });
 
       return nextState;