fix(ui): eliminate ugly scrollbars and prevent overflow in toolbox modal

This commit is contained in:
DemonGatanjieu
2026-09-11 21:57:22 +08:00
parent c2f04e3cc9
commit fcb1d84e7f
3 changed files with 20 additions and 9 deletions
+1 -1
View File
@@ -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;
+4
View File
@@ -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);
};
+15 -8
View File
@@ -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);