sync

app/assets/css/index.css

@@ -31,6 +31,7 @@ main {
     bottom: 0px;
     width: 100%;
     height: 100%;
+    overflow: hidden;
     app-region: drag;
 }
 
@@ -42,6 +43,7 @@ main > nav {
     margin-left: 1rem;
     width: 20%;
     height: 100%;
+    overflow-y: auto;
     background-color: #3e3e3ee6;
 }
 
@@ -416,6 +418,26 @@ div.loader > div.full > div.loading {
     display: none;
     visibility: hidden;
 }
+
+/* Chrome-specific scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1); /* Slightly visible track for better contrast */
+}
+
+::-webkit-scrollbar-thumb {
+    background: #2E8B57;
+    border-radius: 4px; /* Rounded edges for a modern look */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #39aa6d;
+}
+
 @keyframes animateLoadingEffect {
     0% {
         transform: translateX(-100%);