From e455c9974a1517fca80ad9fe1584ca3dc7960fab Mon Sep 17 00:00:00 2001
From: Bernard Xie <bernard@terrastruct.com>
Date: Thu, 29 Dec 2022 16:26:54 -0800
Subject: [PATCH 1/2] set width/height to fit screen

---
 static/watch.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/watch.js b/static/watch.js
index 868fb741b..0ebeddeeb 100644
--- a/static/watch.js
+++ b/static/watch.js
@@ -31,6 +31,25 @@ function init(reconnectDelay) {
       // setting innerHTML to only the actual svg innards. However then you also need to parse
       // out the width, height and viewbox out of the top level SVG tag and update those manually.
       d2SVG.innerHTML = msg.svg;
+
+      const svgEl = d2SVG.querySelector("svg");
+      let width = parseInt(svgEl.getAttribute("width"), 10);
+      let height = parseInt(svgEl.getAttribute("height"), 10);
+      let ratio;
+      if (width > height) {
+        if (width > window.innerWidth) {
+          ratio = window.innerWidth / width;
+        }
+      } else if (height > window.innerHeight) {
+        ratio = window.innerHeight / height;
+      }
+      // Scale svg fit to zoom
+      if (ratio) {
+        // body padding is 8px
+        svgEl.setAttribute("width", width * ratio - 16);
+        svgEl.setAttribute("height", height * ratio - 16);
+      }
+
       d2ErrDiv.style.display = "none";
     }
     if (msg.err) {

From a6aec69360cbb399bebe35f7f40bbd62903d1f27 Mon Sep 17 00:00:00 2001
From: Bernard Xie <bernard@terrastruct.com>
Date: Thu, 29 Dec 2022 16:34:17 -0800
Subject: [PATCH 2/2] add to changelog

---
 ci/release/changelogs/next.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 50ccdb876..f2999131b 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -4,6 +4,8 @@
 
 #### Improvements 🧹
 
+- Watch mode now renders fit to screen. [#560](https://github.com/terrastruct/d2/pull/560)
+
 #### Bugfixes ⛑️
 
 - Restricts where `near` key constant values can be used, with good error messages, instead of erroring (e.g. setting `near: top-center` on a container would cause bad layouts or error). [#538](https://github.com/terrastruct/d2/pull/538)