diff --git a/tinygrad/viz/index.html b/tinygrad/viz/index.html
index 5804a9c4c6..30a486c577 100644
--- a/tinygrad/viz/index.html
+++ b/tinygrad/viz/index.html
@@ -56,7 +56,6 @@
   }
   ul > ul {
     display: none;
-    margin-left: 6px;
   }
   ul.has-children > p::before {
     content:"▸ ";
diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js
index 60c716d1a1..9f968b471e 100644
--- a/tinygrad/viz/js/index.js
+++ b/tinygrad/viz/js/index.js
@@ -675,7 +675,8 @@ async function main() {
         while (stack.length && stack.at(-1).depth >= u.depth) stack.pop();
         const list = stack.length > 0 ? stack.at(-1).li : ul;
         u.li = list.appendChild(document.createElement("ul"));
-        u.li.id = `step-${i}-${j}`;
+        u.li.id = `step-${i}-${j}`
+        u.li.style.marginLeft = u.depth > 0 ? "calc(6px + 1ch)" : "6px";
         const p = u.li.appendChild(document.createElement("p"));
         p.appendChild(colored(`${u.name}`+(u.match_count ? ` - ${u.match_count}` : '')));
         p.onclick = (e) => {