Few fixes

Author: rgantzos

features/stage-in-spritepane/data.json

@@ -7,5 +7,6 @@
     "type": ["Editor"],
     "tags": ["New", "Featured"],
     "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
-    "styles": [{ "file": "style.css", "runOn": "/projects/*" }]
+    "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+    "dynamic": true
 }

features/stage-in-spritepane/script.js

@@ -1,5 +1,34 @@
 export default async function ({ feature, console }) {
-    const stage = await ScratchTools.waitForElement("div.target-pane_stage-selector-wrapper_qekSW");
-    stage.classList.add("ste-stage_in_spritepane");
-    document.getElementsByClassName("sprite-info_sprite-info_3EyZh")[0].appendChild(stage);
-}
+  let activeStage;
+  ScratchTools.waitForElements(
+    "div[class*='target-pane_stage-selector-wrapper_']",
+    function (stage) {
+      activeStage = stage;
+
+      if (!feature.self.enabled) return;
+
+      stage.classList.add("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='sprite-info_sprite-info_']")
+        .appendChild(stage);
+    }
+  );
+
+  feature.addEventListener("disabled", function () {
+    if (activeStage) {
+      activeStage.classList.remove("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='target-pane_target-pane_']")
+        .appendChild(activeStage);
+    }
+  });
+
+  feature.addEventListener("enabled", function () {
+    if (activeStage) {
+      activeStage.classList.add("ste-stage_in_spritepane");
+      document
+        .querySelector("div[class^='sprite-info_sprite-info_']")
+        .appendChild(activeStage);
+    }
+  });
+}

features/stage-in-spritepane/style.css

@@ -1,39 +1,61 @@
-.sprite-info_sprite-info_3EyZh {
+[class*='sprite-info_sprite-info_'] {
     height: auto;
 }
 
-.ste-stage_in_spritepane .stage-selector_stage-selector_3oWOr {
+.ste-stage_in_spritepane [class*='stage-selector_stage-selector_'] {
     margin-top: 8px;
     display: flex;
     flex-direction: initial;
     border: 1.333px solid #00000026;
     border-radius: 0.5rem;
 }
 
-.ste-stage_in_spritepane .stage-selector_header_2GVr1 {
+.ste-stage_in_spritepane [class*='stage-selector_header_'] {
     border: none;
     background: none;
     width: auto;
     margin-right: 8px;
 }
 
-.stage-selector_stage-selector_3oWOr.stage-selector_is-selected_2x2r_ .stage-selector_header_2GVr1 {
+[class*='stage-selector_stage-selector_'][class*='stage-selector_is-selected_'] [class*='stage-selector_header_'] {
     background: none;
 }
 
-.ste-stage_in_spritepane .stage-selector_header_2GVr1 span {
+.ste-stage_in_spritepane [class*='stage-selector_header_'] span {
     color: #575e75;
 }
 
-.ste-stage_in_spritepane .stage-selector_costume-canvas_2L_6h {
+.ste-stage_in_spritepane [class*='stage-selector_costume-canvas_'] {
     margin: 2px;
 }
 
-.ste-stage_in_spritepane .stage-selector_label_1MCfr {
+.ste-stage_in_spritepane [class*='stage-selector_label_'] {
     margin: 0;
 }
 
-.ste-stage_in_spritepane .action-menu_menu-container_3a6da {
+.ste-stage_in_spritepane [class*='action-menu_menu-container_'] {
     right: 0;
     bottom: 7%;
 }
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] {
+    transform: scale(.8) rotate(-90deg);
+    margin-right: .3rem;
+}
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] img {
+    transform: rotate(90deg);
+}
+
+div[class^='stage-selector_stage-selector_'] > div[class^='action-menu_menu-container_'] div[class^='__react_component_tooltip'] {
+    display: none;
+}
+
+div[class^='stage-selector_header-title_'] {
+    display: none;
+}
+
+body div[class^='target-pane_stage-selector-wrapper_'] {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}