add show more button

main.ts

@@ -657,6 +657,10 @@ export default class LoomPlugin extends Plugin {
       })
     );
 
+    this.registerEvent(
+      this.app.workspace.on("resize", () => this.view.render())
+    );
+
     this.registerEvent(
       this.app.vault.on("rename", (file, oldPath) => {
         this.state[file.path] = this.state[oldPath];
@@ -1068,8 +1072,23 @@ class LoomView extends ItemView {
 
       // render children if the node is not collapsed
       if (!node.collapsed) {
-        const childrenDiv = nodeDiv.createDiv({ cls: "loom-children" });
-        renderChildren(id, childrenDiv);
+        // if the node is too narrow, render a hoist button instead
+        const hasChildren = nodes.filter(([, node]) => node.parentId === id).length > 0;
+        if (nodeDiv.offsetWidth < 150 && hasChildren) {
+          const hoistButton = nodeDiv.createDiv({ cls: "loom-hoist-button" });
+          setIcon(hoistButton, "arrow-up");
+          hoistButton.createEl("span", {
+            text: "Show more...",
+            cls: "loom-hoist-button-text",
+          });
+
+          hoistButton.addEventListener("click", () =>
+            this.app.workspace.trigger("loom:hoist", id)
+          );
+        } else {
+          const childrenDiv = nodeDiv.createDiv({ cls: "loom-children" });
+          renderChildren(id, childrenDiv);
+        }
       }
     };
 

styles.css

@@ -36,6 +36,25 @@
   transform: rotate(-90deg);
 }
 
+.loom-hoist-button {
+  color: var(--text-faint);
+  font-size: 0.9em;
+  margin: 0.35em 0 0.35em 1.6em;
+  white-space: nowrap;
+
+  display: flex;
+  align-items: center;
+  width: max-content;
+}
+
+.loom-hoist-button:hover {
+  color: var(--text-normal);
+}
+
+.loom-hoist-button-text {
+  margin-left: 0.2em;
+}
+
 .loom-children {
   margin-left: 1em;
 }