From fcb1d84e7fe7fa3fbd1469090dd5dc544aac8454 Mon Sep 17 00:00:00 2001
From: DemonGatanjieu <1027066412@qq.com>
Date: Fri, 11 Sep 2026 21:57:22 +0800
Subject: [PATCH] fix(ui): eliminate ugly scrollbars and prevent overflow in
 toolbox modal

---
 ARCHITECTURE.md           |  2 +-
 web/modules/ui_sidebar.js |  4 ++++
 web/styles.css            | 23 +++++++++++++++--------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 4f9d1db..c8987aa 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -81,7 +81,7 @@ DOM or live LiteGraph state.
   primary model-browser surfaces, including the frosted-glass capsule parameter inspection
   button with lightweight vector SVG icons and GPU-accelerated micro-interactions;
   the sidebar bottom action bar (`#anomalous-sidebar-actions`) features intuitive, highly restrained glyphic vector SVG icons (`SIDEBAR_ICONS`):
-   (1) Toolbox Hub (`#anomalous-toolbox-btn`): Precision 18px vector toolbox icon (`TOOLBOX`) anchoring the leftmost action slot, triggering an elevated 232px micro-utility drawer popover (`#anomalous-toolbox-modal`, z-index 999999) anchored directly above the action bar in the bottom-left corner (`bottom: 50px; left: 10px;`, collapsed `left: 68px`), presenting a high-density 3-column app/utility icon grid palette (`.anomalous-toolbox-grid`, `.anomalous-toolbox-tile`) with instant tooltips, amber status indicator dots, extensible tool registry (`this.registerToolboxItem`), zero obstruction to the central model grid, and mutual exclusivity against Settings Hub;
+   (1) Toolbox Hub (`#anomalous-toolbox-btn`): Precision 18px vector toolbox icon (`TOOLBOX`) anchoring the leftmost action slot, triggering an elevated 236px zero-scrollbar micro-utility drawer popover (`#anomalous-toolbox-modal`, z-index 999999, `overflow: hidden`) anchored directly above the action bar in the bottom-left corner (`bottom: 50px; left: 10px;`, collapsed `left: 68px`), presenting a high-density 3-column app/utility icon grid palette (`.anomalous-toolbox-grid`, `.anomalous-toolbox-tile`) with instant tooltips, amber status indicator dots, extensible tool registry (`this.registerToolboxItem`), zero obstruction to the central model grid, and mutual exclusivity against Settings Hub;
    (2) Scan Wizard (`#anomalous-scan-btn`): Clean circular radar scope with range ring, crosshairs, and sweep beacon (`SCAN_RADAR_ICON_SVG`), animated only during active scanning;
    (3) Model Doctor (`#anomalous-doctor-btn`): Sleek diagnostic medical stethoscope, instantly conveying health check semantics;
    (4) AI Assistant (`#anomalous-assistant-btn`): Radiant AI copilot sparkles (`✦`), representing copilot intelligence;
diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js
index f47d28f..354ef3c 100644
--- a/web/modules/ui_sidebar.js
+++ b/web/modules/ui_sidebar.js
@@ -2047,6 +2047,10 @@ export function createDOM() {
             hintFooter.style.textAlign = 'center';
             hintFooter.style.padding = '4px 2px 0';
             hintFooter.style.borderTop = '1px solid rgba(255, 255, 255, 0.05)';
+            hintFooter.style.whiteSpace = 'nowrap';
+            hintFooter.style.overflow = 'hidden';
+            hintFooter.style.textOverflow = 'ellipsis';
+            hintFooter.style.flexShrink = '0';
 
             toolboxModal.appendChild(hintFooter);
         };
diff --git a/web/styles.css b/web/styles.css
index 71baaa9..7a31daa 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1033,22 +1033,29 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     position: absolute;
     bottom: 50px;
     left: 10px;
-    width: 232px;
-    max-height: calc(100% - 64px);
-    overflow-y: auto;
+    width: 236px;
     box-sizing: border-box;
     background: rgba(22, 22, 26, 0.98);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 10px;
-    padding: 10px;
+    padding: 10px 10px 8px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
     z-index: 999999 !important;
     transition: left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
     display: none;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
+    overflow: hidden !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+}
+
+#anomalous-toolbox-modal::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
 }
 
 .anomalous-sidebar-closed #anomalous-toolbox-modal {
@@ -1060,7 +1067,7 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 6px;
-    margin: 2px 0 4px;
+    margin: 2px 0 2px;
 }
 
 .anomalous-toolbox-tile {
@@ -1069,8 +1076,8 @@ html:not(.anomalous-floating-entry-enabled) [data-setting-id="Anomalous.ModelBro
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding: 9px 4px 7px;
-    min-height: 58px;
+    padding: 8px 3px 6px;
+    min-height: 54px;
     box-sizing: border-box;
     background: rgba(255, 255, 255, 0.035);
     border: 1px solid rgba(255, 255, 255, 0.06);