updated tree box width and height to better match current styling, cleaned up tree display code. Tree width is assigned at tree creation so it is difficult to dynamically adjust based on text content, so for VERY long component names the overflow-x: break-word property was added to create a new line. This will work unless someone gives a component name something incredibly long

Author: MrBeeAreWhy

src/components/dashboard_items/Tree.vue

@@ -12,24 +12,19 @@ Description:
       :config="treeConfig"
       ref="tree"
       @wheel="zoom">
-      <template v-slot:node="{ node, collapsed }">
+      <template v-slot:node="{ node }">
         <span v-if="this.activeComponent === node.value"
           class="tree-node-active"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
-          
           >
           {{ node.value }}
         </span>
           <span v-else-if="this.activeRoute === node.value"
           class="tree-node-activeRoute"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
-          
           >
           {{ node.value }}
         </span>
         <span v-else
           class="tree-node"
-          :style="{ border: collapsed ? '2px solid grey' : '' }"
           @click="activateNode(node.value)"
           >
           {{ node.value }}
@@ -152,7 +147,6 @@ export default {
   watch: {
     componentMap: {
       handler(){
-        console.log(this.componentMap)
         this.treeData = this.buildTree(this.componentMap);
       },
       deep: true,
@@ -161,7 +155,7 @@ export default {
   data() { 
     return {
       treeData: this.buildTree(this.$store.state.componentMap),
-      treeConfig: { nodeWidth: 120, nodeHeight: 80, levelHeight: 200},
+      treeConfig: { nodeWidth: 175, nodeHeight: 100, levelHeight: 200},
       componentData: this.$store.state.componentMap,
     }
   }
@@ -181,14 +175,16 @@ export default {
 
 .tree-node, .tree-node-active, .tree-node-activeRoute {
   display: inline-block;
-  width: 90%;
   padding: 8px;
+  min-width: 80%; 
   margin: 6px;
   min-height: 28px;
   color: #FFFFFF;
   background-color: $secondary;
   text-align: center;
   line-height: 28px;
+  border-radius: 3px;
+  word-wrap: break-word;
 }
 
 .tree-node-active {
@@ -198,7 +194,8 @@ export default {
 }
 
 .tree-node-activeRoute {
-  background-color: #155158;
+  background-color: $accent;
+  color: #155158;
   border: 2px solid rgb(196, 154, 19);
 }