From 7d561e0c6b1a047177654fd9143109f6c06eab58 Mon Sep 17 00:00:00 2001
From: jocayn <1579649885@qq.com>
Date: Sat, 13 Jun 2026 17:44:07 +0800
Subject: [PATCH] style: optimize scrollbar styles and limit table heights with
 sticky headers

---
 public/index.html  | 24 ++++++++++++++++++++++++
 public/viewer.html | 23 +++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/public/index.html b/public/index.html
index bfe0572..490493e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,6 +28,24 @@
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+    }
+
+    /* Custom Scrollbar Styles */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.12);
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--accent-purple);
     }
 
     body {
@@ -312,6 +330,8 @@
 
     /* Proxy Nodes view */
     .table-container {
+      max-height: 480px;
+      overflow-y: auto;
       overflow-x: auto;
     }
 
@@ -322,6 +342,10 @@
     }
 
     th {
+      position: sticky;
+      top: 0;
+      background: #0f1523; /* solid dark background matching blended card color */
+      z-index: 10;
       padding: 1rem;
       color: var(--text-secondary);
       font-weight: 600;
diff --git a/public/viewer.html b/public/viewer.html
index 3694bb9..ff2914e 100644
--- a/public/viewer.html
+++ b/public/viewer.html
@@ -19,6 +19,24 @@
 
     * {
       box-sizing: border-box;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+    }
+
+    /* Custom Scrollbar Styles */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.12);
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--primary);
     }
 
     [hidden] {
@@ -164,6 +182,8 @@
     }
 
     .table-wrap {
+      max-height: 480px;
+      overflow-y: auto;
       overflow-x: auto;
     }
 
@@ -182,7 +202,10 @@
     }
 
     th {
+      position: sticky;
+      top: 0;
       background: #f8fafc;
+      z-index: 10;
       color: #475569;
       font-size: 0.78rem;
       font-weight: 750;