From f08299d2ecd861f73b5dcda9003b9cfde5bab145 Mon Sep 17 00:00:00 2001
From: qazal <77887910+Qazalin@users.noreply.github.com>
Date: Fri, 5 Sep 2025 18:29:03 +0300
Subject: [PATCH] viz: small profiler resizing improvements (#12026)

* switch to ResizeObserver

* set a fixed size for device-list

* less

* height from devices

* int

* side rect, more const
---
 tinygrad/viz/index.html  | 5 ++++-
 tinygrad/viz/js/index.js | 9 ++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/tinygrad/viz/index.html b/tinygrad/viz/index.html
index a2af54f57d..77d4e4292e 100644
--- a/tinygrad/viz/index.html
+++ b/tinygrad/viz/index.html
@@ -252,7 +252,7 @@
   }
   #device-list > div {
     min-height: 32px;
-    max-width: 132px;
+    width: 132px;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
@@ -261,6 +261,9 @@
   #device-list > div:hover {
     background-color: rgba(20, 23, 35, 0.3);
   }
+  #device-list {
+    height: fit-content;
+  }
   .raw-text {
     padding: 0 8px;
     width: 100%;
diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js
index 00eacafefd..4bb4a2bc41 100644
--- a/tinygrad/viz/js/index.js
+++ b/tinygrad/viz/js/index.js
@@ -380,9 +380,9 @@ async function renderProfiler() {
 
   function resize() {
     const profiler = document.querySelector(".profiler");
-    // NOTE: use clientWidth to account for the scrollbar
-    let [width, height] = [profiler.clientWidth, profiler.scrollHeight];
-    width -= rect("#device-list").width+padding;
+    const sideRect = rect("#device-list");
+    const width = profiler.clientWidth-(sideRect.width+padding), height = Math.round(sideRect.height);
+    if (canvas.width === width*dpr && canvas.height === height*dpr) return;
     canvas.width = width*dpr;
     canvas.height = height*dpr;
     canvas.style.height = `${height}px`;
@@ -395,8 +395,7 @@ async function renderProfiler() {
   d3.select(canvas).call(canvasZoom);
   document.addEventListener("contextmenu", e => e.ctrlKey && e.preventDefault());
 
-  resize();
-  window.addEventListener("resize", resize);
+  new ResizeObserver(([e]) => e.contentRect.width > 0 && resize()).observe(profiler.node());
 
   function findRectAtPosition(x, y) {
     const { top, left, width, height } = rect(canvas);