From ba78f77243d7c413c64d56e79bedbfdbe8fa54dd Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Thu, 26 Mar 2026 17:32:57 +0800
Subject: [PATCH] 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   | 18 ++++++++++++++++++
 src/views/Home.vue           | 18 ++++++++++++++++++
 src/views/InstanceDetail.vue | 23 +++++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 1b54ea9..092cc44 100644
--- a/src/components/SideBar.vue
+++ b/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;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3be354a..15b625f 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index 0c00b08..f3e5f32 100644
--- a/src/views/InstanceDetail.vue
+++ b/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>