Fix the list column's :has() rule slowing every style change (#22)

The rule that hides the list column while a workspace is open matched
the workspace panel's style attribute inside :has(). Chrome then treats
every inline-style write on the page as a possible change and restyles
the whole page, so extensions that move their buttons every frame took
a large workflow's canvas down to 2-3 fps. The container now gets an
anomalous-workspace-open class from a MutationObserver on the panel's
style (every module opening a workspace sets its display), and the CSS
keys off that class.

Found, measured and fix proposed by Lindemellis in issue #22.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 📈 Anomalous Model Browser Changelog
 
+## v1.58.3 Beta (Fix: canvas speed with other extensions) — unreleased
+
+### 🐢 The canvas stays smooth with other extensions (画布不再被其他插件拖慢)
+- One style rule of the browser (the list column stepping aside while a workspace is open) made every inline-style change on the page, by any extension and also while the browser is closed, restyle the whole page. Extensions that move their buttons on every canvas frame (ComfyUI-Prompt-Assistant, for one) then brought a large workflow's canvas down to 2–3 fps. The list column now follows a class on the window instead. Thanks to **@Lindemellis** for finding it, measuring it and proposing the fix ([#22](https://github.com/DemonGatanjieu/Anomalous_Model_Browser/issues/22)).
+
 ## v1.58.2 Beta (Small fixes: Esc closes, Show in folder, insert a picture as a node) — 2026-10-13
 
 ### 💬 From a Bilibili comment (来自 B 站评论)

web/modules/ui_sidebar.js

@@ -221,6 +221,12 @@ export function createDOM() {
         content.append(header, this.grid, this.detailPanel, this.galleryPanel, this.homePanel, this.activityPanel, this.scanPanel, this.settingsPanel, this.doctorPanel,
             this.assistantPanel, this.audioStudioPanel, this.scriptPanel, this.audioGalleryPanel);
         container.append(rail.root, this.sidebarWrapper, content, this.nbPanel);
+        // The list column steps aside while a workspace is open. Several modules open it by
+        // setting its display, so the container gets a class for it; CSS matching the style
+        // attribute inside :has() makes every inline-style write on the page recalc all
+        // styles (issue #22, canvas at 2-3 fps).
+        const syncWorkspaceOpen = () => container.classList.toggle('anomalous-workspace-open', this.nbPanel.style.display === 'flex');
+        new MutationObserver(syncWorkspaceOpen).observe(this.nbPanel, { attributes: true, attributeFilter: ['style'] });
         this.modal.appendChild(container);
 
         installShellNavigation(this, { container, rail, listToggle, title: pageTitle });

web/styles.css

@@ -13,7 +13,7 @@
 @import url("./styles/12-tts-setup.css?v=20261002-theme-1");
 @import url("./styles/13-script-director.css?v=20261002-voiceover-2");
 @import url("./styles/14-version-manager.css?v=20261002-theme-1");
-@import url("./styles/15-shell-rail.css?v=20261012-remote");
+@import url("./styles/15-shell-rail.css?v=20261015-workspace");
 @import url("./styles/16-activity.css?v=20261002-theme-1");
 @import url("./styles/17-model-types.css?v=20261002-theme-1");
 @import url("./styles/18-scan-page.css?v=20261003-folders-1");

web/styles/15-shell-rail.css

@@ -139,7 +139,7 @@
 }
 
 #anomalous-container.anomalous-has-rail.anomalous-sidebar-closed #anomalous-sidebar-wrapper,
-#anomalous-container.anomalous-has-rail:has(> .anomalous-nb-modal[style*="display: flex"]) #anomalous-sidebar-wrapper {
+#anomalous-container.anomalous-has-rail.anomalous-workspace-open #anomalous-sidebar-wrapper {
     width: 0;
     margin-right: 0;
     margin-left: 0;