style(ui): add custom scrollbar styling to multiple components

Implement consistent scrollbar styling across Home, SideBar, and InstanceDetail components using CSS variables for theming. The styling includes track and thumb colors with hover effects for better visual feedback.

src/components/SideBar.vue

@@ -67,6 +67,24 @@ export default {
     flex-direction: column;
 }
 
+.sidebar::-webkit-scrollbar {
+    width: 8px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 0 8px 8px 0;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: var(--sidebar-active-bg);
+}
+
 .menu {
     padding: 16px 0;
     flex: 1;

src/views/Home.vue

@@ -51,4 +51,22 @@ export default {
     flex: 1;
     overflow-y: auto;
 }
+
+.main-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.main-content::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 0 8px 8px 0;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+.main-content::-webkit-scrollbar-thumb:hover {
+    background: var(--sidebar-active-bg);
+}
 </style>

src/views/InstanceDetail.vue

@@ -896,4 +896,27 @@ export default {
 .restart-btn i {
     font-size: 14px;
 }
+
+.section:last-child .logs-container {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto;
+}
+
+.section:last-child .logs-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.section:last-child .logs-container::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 0 8px 8px 0;
+}
+
+.section:last-child .logs-container::-webkit-scrollbar-thumb {
+    background: var(--primary-color);
+    border-radius: 4px;
+}
+
+.section:last-child .logs-container::-webkit-scrollbar-thumb:hover {
+    background: var(--sidebar-active-bg);
+}
 </style>