diff --git a/src/components/trace/hat-graph-branch.ts b/src/components/trace/hat-graph-branch.ts
index 4670f2f5a7..fb36470949 100644
--- a/src/components/trace/hat-graph-branch.ts
+++ b/src/components/trace/hat-graph-branch.ts
@@ -153,7 +153,7 @@ export class HatGraphBranch extends LitElement {
         z-index: 1;
       }
       ::slotted([slot="head"]) {
-        margin-bottom: calc(var(--hat-graph-branch-height) / -2);
+        margin-bottom: calc(var(--hat-graph-branch-height) / -2px);
       }
       #lines {
         position: absolute;
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 781a8254f9..5b623eb61e 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -90,10 +90,12 @@ export class HatGraphNode extends LitElement {
         display: flex;
         flex-direction: column;
         width: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing));
-        height: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1);
+        height: calc(
+          var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1px
+        );
       }
       :host([graphStart]) {
-        height: calc(var(--hat-graph-node-size) + 2);
+        height: calc(var(--hat-graph-node-size) + 2px);
       }
       :host([track]) {
         --stroke-clr: var(--track-clr);