css UI fixes, new panel, code optimizaiton, security fixes

web/css/helpers.css

@@ -71,6 +71,11 @@
     margin: 0 !important;
 }
 
+
+.m-10 {
+    margin: 10px;
+}
+
 .m-left-20 {
     margin-left: 20px;
 }
@@ -186,6 +191,10 @@
     margin-top: 25px;
 }
 
+.bottom-10 {
+    margin-bottom: 10px;
+}
+
 .bottom-20 {
     margin-bottom: 20px;
 }
@@ -238,12 +247,34 @@ table .input-text {
     animation: blinker 1.5s infinite;
 }
 
+.scrollable-container {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto; /* Enables horizontal scrolling */
+    white-space: nowrap;
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar in Edge */
+}
+
+/* Hide scrollbar for Chrome, Safari */
+.scrollable-container::-webkit-scrollbar {
+    display: none;
+}
+
+/* Chevron styling */
+.scroll-left,
+.scroll-right {
+    display: none; /* Hidden by default */
+    cursor: pointer;
+    width: 48px;
+}
+
 @keyframes blinker {
     0% {
-        background-color: var(--color-4);
+        background-color: var(--color-3);
     }
     100% {
-        background-color: var(--color-2);
+        background-color: var(--color-1);
     }
 }
 
@@ -286,7 +317,7 @@ table .input-text {
 }
 
 /* Laptop compact view */
-@media only screen and (min-width: 960px) and (max-height: 860px) {
+@media only screen and (min-width: 960px) and (max-height: 720px) {
     .text-big {
         font-size: 40px;
     }