From a543f5cb0cc79bf959e78d3771ef1fe98464f918 Mon Sep 17 00:00:00 2001
From: Mario <github@franzbonenkamp.de>
Date: Thu, 4 Jan 2024 21:42:19 +0100
Subject: [PATCH] fix pixel waste (#440)

---
 .../static/netbox_topology_views/css/app.css  |  2 +-
 netbox_topology_views/static_dev/css/app.scss |  3 +-
 .../netbox_topology_views/index.html          | 34 +++++++++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/netbox_topology_views/static/netbox_topology_views/css/app.css b/netbox_topology_views/static/netbox_topology_views/css/app.css
index a411c7b..b9e95d1 100644
--- a/netbox_topology_views/static/netbox_topology_views/css/app.css
+++ b/netbox_topology_views/static/netbox_topology_views/css/app.css
@@ -1 +1 @@
-#visgraph{height:64vh}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529}.image-dropdown img{width:64px;height:64px}.image-dropdown-content{display:flex;flex-wrap:wrap;gap:.5rem;padding-inline:.5rem;width:50vw;max-width:32rem}.image-dropdown-content>img{cursor:pointer}
+#visgraph{height:64vh;border:1px solid #ced4da}html[data-netbox-color-mode=dark] #visgraph{background-color:#212529;border:1px solid #495057}.image-dropdown img{width:64px;height:64px}.image-dropdown-content{display:flex;flex-wrap:wrap;gap:.5rem;padding-inline:.5rem;width:50vw;max-width:32rem}.image-dropdown-content>img{cursor:pointer}
diff --git a/netbox_topology_views/static_dev/css/app.scss b/netbox_topology_views/static_dev/css/app.scss
index 8394179..93a8afe 100644
--- a/netbox_topology_views/static_dev/css/app.scss
+++ b/netbox_topology_views/static_dev/css/app.scss
@@ -1,12 +1,13 @@
 #visgraph {
   height: 64vh;
+  border: 1px solid #ced4da
 }
 
 html[data-netbox-color-mode=dark] #visgraph {
   background-color: #212529;
+  border: 1px solid #495057
 }
 
-
 .image-dropdown img {
   width: 64px;
   height: 64px;
diff --git a/netbox_topology_views/templates/netbox_topology_views/index.html b/netbox_topology_views/templates/netbox_topology_views/index.html
index 07d01a7..de3d19c 100644
--- a/netbox_topology_views/templates/netbox_topology_views/index.html
+++ b/netbox_topology_views/templates/netbox_topology_views/index.html
@@ -79,7 +79,37 @@
   <script type="text/javascript">
     const brokenImage = '{{ broken_image }}';
     const topologyData = {{ topology_data | safe }};
-    const basePath = '{{ basepath }}';    
-  </script>
+    const basePath = '{{ basepath }}';
+
+    window.addEventListener("resize", resizeCanvas);
+    resizeCanvas();
+
+    function resizeCanvas() {
+      heightToSubtract = getElementHeight('.navbar') + 
+        getElementHeight('.title-container') + 
+        getElementHeight('#tabswrapper') + 
+        getElementHeight('#filterwrapper') + 
+        getElementHeight('.footer') +
+        getElementPadding('#tabcontentwrapper');
+
+      document.getElementById("visgraph").style.height = "calc(100vh - " + heightToSubtract + "px)";
+    }
+
+    function getElementPadding(element) {
+      el = document.querySelector(element);
+      els = getComputedStyle(el);
+      padding = parseInt(els.paddingTop) + parseInt(els.paddingBottom);
+
+      return padding;
+    }
+
+    function getElementHeight(element) {
+      el = document.querySelector(element);
+      els = getComputedStyle(el);
+      height = el.offsetHeight + parseInt(els.marginTop) + parseInt(els.marginBottom);
+
+      return height;
+    }
+</script>
 	<script src="{% static 'netbox_topology_views/js/app.js' %}" defer></script>
 {% endblock javascript %}