updating diagrams and infra docs to add a addEventListener for resize of the iframe. this will help resize the view when loaded on page

projects/homelab/diagrams.md

@@ -16,13 +16,52 @@ tags: ['homelab', 'infrastructure', 'network']
 ## 2026 Home lab
 
 {{< rawhtml >}}
-<iframe
-  src="https://homelable.wompmacho.com/view?key=live"
-  width="100%"
-  height="700px"
-  style="border:none; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: auto;"
-  allowfullscreen>
-</iframe>
+
+<div class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
+  <iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
+</div>
+
+<script>
+  document.getElementById('homelabel-frame').addEventListener('load', function() {
+    const iframe = this;
+    const wrapper = iframe.parentElement;
+    
+    function scaleIframe() {
+      const targetWidth = wrapper.offsetWidth;
+      const screenWidth = window.innerWidth;
+      
+      // Dynamically determine what the "ideal" unscaled width of your 
+      // Homelabel dashboard should be based on the user's current screen.
+      let virtualWidth = 1400; // Default for large desktops
+      
+      if (screenWidth < 768) {
+        virtualWidth = 480;  // Mobile view baseline
+      } else if (screenWidth < 1200) {
+        virtualWidth = 900;  // Tablet/Small laptop baseline
+      }
+
+      // Calculate the scaling ratio
+      const scale = targetWidth / virtualWidth;
+
+      // Apply the 3D transform scale if the container is smaller than the target layout
+      if (scale < 1) {
+        iframe.style.width = virtualWidth + 'px';
+        iframe.style.height = (wrapper.offsetHeight / scale) + 'px';
+        iframe.style.transform = `scale(${scale})`;
+        iframe.style.transformOrigin = 'top left';
+      } else {
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.transform = 'none';
+      }
+    }
+
+    // Run on load and whenever the screen updates
+    scaleIframe();
+    window.addEventListener('resize', scaleIframe);
+  });
+</script>
+
 {{< /rawhtml >}}
 
 ---