gantt css, dynamic css and colors

buildoz.css

@@ -375,7 +375,8 @@ bz-grafloweditor .inner-console section .cols-2 input{
 
 bz-gantt{
     position: relative;
-    --row: 30px;
+    --row: 25px;
+    --bar-gap: 4px; /* space above & below each bar inside its row */
 }
 bz-gantt ul.tasks{
     list-style: none;
@@ -393,6 +394,6 @@ bz-gantt ul.tasks li{
 
 bz-gantt.gantt bz-graflow{
     position: absolute;
-    left: 8em;
+    left: calc(var(--tasks-width, 7em) + 1em);
-    top: 0.5em;
+    top: var(--bar-gap);
 }

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,

graflow_examples/nodesLib/nodesGantt.html

@@ -9,7 +9,8 @@
     .bzgf-node .body{ 
         border-radius: 4px;
         overflow: hidden;
-        height: 1.2em;
+        height: calc(var(--row, 30px) - 2 * var(--bar-gap, 8px));
+        line-height: calc(var(--row, 30px) - 2 * var(--bar-gap, 8px));
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: .9em;

graflow_examples/test8.html

@@ -29,16 +29,16 @@
         <script>
             const ganttData = {
                 "tasks": [
-                    { "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05" },
+                    { "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05", "color": "#8F8" },
-                    { "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "dependsOn": ["t8"] },
+                    { "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "color": "#F8F", "dependsOn": ["t8"] },
-                    { "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "dependsOn": ["t9"] },
+                    { "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "color": "#FF8", "dependsOn": ["t9"] },
-                    { "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10" },
+                    { "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10", "color": "#F88" },
-                    { "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "dependsOn": ["t4", "t7"] },
+                    { "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "color": "#88F", "dependsOn": ["t4", "t7"] },
-                    { "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "dependsOn": ["t5"] },
+                    { "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t5"] },
-                    { "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "dependsOn": ["t1"] },
+                    { "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "color": "#88F", "dependsOn": ["t1"] },
-                    { "id": "t8", "name": "Task 8", "start": "2026-09-08", "end":"2026-09-15", "dependsOn": ["t6"] },
+                    { "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-08", "end":"2026-09-15", "color": "#8F8", "dependsOn": ["t6"] },
-                    { "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "dependsOn": ["t8"] },
+                    { "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "color": "#F8F", "dependsOn": ["t8"] },
-                ]
+                ], "color": "#8F8"
             }
             
             window.addEventListener('load',()=>{