gantt css, dynamic css and colors

bzGantt.js

@@ -20,6 +20,7 @@ class BZgantt extends Buildoz {
     async connectedCallback(){
         await customElements.whenDefined('bz-graflow')
         super.connectedCallback()
+        this.rowHeight = parseFloat(getComputedStyle(this).getPropertyValue('--row')) || 30
 
         this.ul = document.createElement('ul')
         this.ul.classList.add('tasks')
@@ -160,7 +161,7 @@ class BZgantt extends Buildoz {
             for(const dep of task.dependsOn ?? []){
                 flow.links.push({ "from": [dep, "out1"], "to": [task.id, "inp1"] })
             }
-            curY += 30 // row height
+            curY += this.rowHeight
         }
         return flow
     }
@@ -172,6 +173,16 @@ class BZgantt extends Buildoz {
             li.textContent = task.name
             this.ul.appendChild(li)
         }
+
+        // Publish the widest label width, used by CSS to place the graflow
+        const range = document.createRange()
+        let maxWidth = 0
+        for(const li of this.ul.children){
+            range.selectNodeContents(li)
+            maxWidth = Math.max(maxWidth, range.getBoundingClientRect().width)
+        }
+        this.style.setProperty('--tasks-width', Math.ceil(maxWidth) + 'px')
+
         const flow = this.buildFlow()
         this.graflow.loadFlow({
             "nodesFile": this.nodesfile,