From 592b5a24db5d1b8ff73077d9110e1ff46e627efb Mon Sep 17 00:00:00 2001
From: wompmacho <michael@wompmacho.com>
Date: Sat, 6 Jun 2026 22:14:32 +0000
Subject: [PATCH] updating diagram with a fullscreen button and better
 formating

---
 projects/homelab/diagrams.md      | 120 +++++++++++++++++++++++++-----
 projects/homelab/homelab_Infra.md | 119 ++++++++++++++++++++++++-----
 2 files changed, 205 insertions(+), 34 deletions(-)

diff --git a/projects/homelab/diagrams.md b/projects/homelab/diagrams.md
index 8cc095e..212abc8 100644
--- a/projects/homelab/diagrams.md
+++ b/projects/homelab/diagrams.md
@@ -17,38 +17,103 @@ tags: ['homelab', 'infrastructure', 'network']
 
 {{< rawhtml >}}
 
-<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 id="homelabel-container" style="position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #1e1e1e;">
+  
+  <button id="fullscreen-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+    <span>Fullscreen</span>
+  </button>
+
+  <div id="wrapper-target" 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>
 </div>
 
+<style>
+  #homelabel-frame {
+    display: block !important;
+    flex-shrink: 0 !important; 
+  }
+  
+  /* Regular view wrapper: standard, safe layout rules */
+  #wrapper-target {
+    overflow: hidden !important;
+    position: relative !important;
+  }
+  
+  /* Fullscreen Container Engine */
+  #homelabel-container:fullscreen {
+    width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important; 
+    border-radius: 0 !important;
+    padding: 24px !important; 
+    box-sizing: border-box !important;
+    background: #1e1e1e !important;
+    overflow: hidden !important;
+    
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+
+  /* Fullscreen Wrapper: Converts to a flex centering field ONLY when fullscreen */
+  #homelabel-container:fullscreen #wrapper-target {
+    width: 100% !important;
+    flex: 1 !important;
+    height: auto !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+</style>
+
 <script>
   document.getElementById('homelabel-frame').addEventListener('load', function() {
     const iframe = this;
-    const wrapper = iframe.parentElement;
+    const wrapper = document.getElementById('wrapper-target'); 
+    const container = document.getElementById('homelabel-container');
+    const fsButton = document.getElementById('fullscreen-btn');
     
     function scaleIframe() {
       const targetWidth = wrapper.offsetWidth;
+      const targetHeight = wrapper.offsetHeight;
       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 (targetWidth === 0 || targetHeight === 0) return;
+
+      // Base layout breakpoints
+      let virtualWidth = 1400; 
       if (screenWidth < 768) {
-        virtualWidth = 480;  // Mobile view baseline
+        virtualWidth = 480;  
       } else if (screenWidth < 1200) {
-        virtualWidth = 900;  // Tablet/Small laptop baseline
+        virtualWidth = 900;  
+      }
+      
+      let virtualHeight = 950; 
+      let scale;
+
+      // FIX: Isolate calculation parameters and transform origins per state
+      if (document.fullscreenElement) {
+        const scaleX = targetWidth / virtualWidth;
+        const scaleY = targetHeight / virtualHeight;
+        
+        scale = Math.min(scaleX, scaleY);
+        iframe.style.transformOrigin = 'center center';
+      } else {
+        // Safe standard inline calculations
+        scale = targetWidth / virtualWidth;
+        virtualHeight = targetHeight / scale;
+        iframe.style.transformOrigin = 'top left';
       }
 
-      // Calculate the scaling ratio
-      const scale = targetWidth / virtualWidth;
-
-      // Apply the 3D transform scale if the container is smaller than the target layout
+      // Apply transformations
       if (scale < 1) {
         iframe.style.width = virtualWidth + 'px';
-        iframe.style.height = (wrapper.offsetHeight / scale) + 'px';
+        iframe.style.height = virtualHeight + 'px';
         iframe.style.transform = `scale(${scale})`;
-        iframe.style.transformOrigin = 'top left';
       } else {
         iframe.style.width = '100%';
         iframe.style.height = '100%';
@@ -56,9 +121,30 @@ tags: ['homelab', 'infrastructure', 'network']
       }
     }
 
-    // Run on load and whenever the screen updates
+    // --- FULLSCREEN INTERACTION CONTROLS ---
+    fsButton.addEventListener('click', () => {
+      if (!document.fullscreenElement) {
+        container.requestFullscreen().catch(err => {
+          console.error(`Error attempting to enable fullscreen: ${err.message}`);
+        });
+        fsButton.querySelector('span').textContent = 'Exit';
+      } else {
+        document.exitFullscreen();
+        fsButton.querySelector('span').textContent = 'Fullscreen';
+      }
+    });
+
+    document.addEventListener('fullscreenchange', () => {
+      if (!document.fullscreenElement) {
+        fsButton.querySelector('span').textContent = 'Fullscreen';
+      }
+      setTimeout(scaleIframe, 75);
+    });
+
     scaleIframe();
-    window.addEventListener('resize', scaleIframe);
+    window.addEventListener('resize', () => {
+      setTimeout(scaleIframe, 50);
+    });
   });
 </script>
 
diff --git a/projects/homelab/homelab_Infra.md b/projects/homelab/homelab_Infra.md
index b609eb7..230fd46 100644
--- a/projects/homelab/homelab_Infra.md
+++ b/projects/homelab/homelab_Infra.md
@@ -19,38 +19,102 @@ This document outlines the internal infrastructure of the **wompmacho** homelab.
 >
 > {{< rawhtml >}}
 
-<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 id="homelabel-container" style="position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #1e1e1e;">
+  
+  <button id="fullscreen-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+    <span>Fullscreen</span>
+  </button>
+
+  <div id="wrapper-target" 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>
 </div>
 
+<style>
+  #homelabel-frame {
+    display: block !important;
+    flex-shrink: 0 !important; 
+  }
+  
+  /* Regular view wrapper: standard, safe layout rules */
+  #wrapper-target {
+    overflow: hidden !important;
+    position: relative !important;
+  }
+  
+  /* Fullscreen Container Engine */
+  #homelabel-container:fullscreen {
+    width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important; 
+    border-radius: 0 !important;
+    padding: 24px !important; 
+    box-sizing: border-box !important;
+    background: #1e1e1e !important;
+    overflow: hidden !important;
+    
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+
+  /* Fullscreen Wrapper: Converts to a flex centering field ONLY when fullscreen */
+  #homelabel-container:fullscreen #wrapper-target {
+    width: 100% !important;
+    flex: 1 !important;
+    height: auto !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+  }
+</style>
+
 <script>
   document.getElementById('homelabel-frame').addEventListener('load', function() {
     const iframe = this;
-    const wrapper = iframe.parentElement;
+    const wrapper = document.getElementById('wrapper-target'); 
+    const container = document.getElementById('homelabel-container');
+    const fsButton = document.getElementById('fullscreen-btn');
     
     function scaleIframe() {
       const targetWidth = wrapper.offsetWidth;
+      const targetHeight = wrapper.offsetHeight;
       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 (targetWidth === 0 || targetHeight === 0) return;
+
+      // Base layout breakpoints
+      let virtualWidth = 1400; 
       if (screenWidth < 768) {
-        virtualWidth = 480;  // Mobile view baseline
+        virtualWidth = 480;  
       } else if (screenWidth < 1200) {
-        virtualWidth = 900;  // Tablet/Small laptop baseline
+        virtualWidth = 900;  
+      }
+      
+      let virtualHeight = 950; 
+      let scale;
+
+      // FIX: Isolate calculation parameters and transform origins per state
+      if (document.fullscreenElement) {
+        const scaleX = targetWidth / virtualWidth;
+        const scaleY = targetHeight / virtualHeight;
+        
+        scale = Math.min(scaleX, scaleY);
+        iframe.style.transformOrigin = 'center center';
+      } else {
+        // Safe standard inline calculations
+        scale = targetWidth / virtualWidth;
+        virtualHeight = targetHeight / scale;
+        iframe.style.transformOrigin = 'top left';
       }
 
-      // Calculate the scaling ratio
-      const scale = targetWidth / virtualWidth;
-
-      // Apply the 3D transform scale if the container is smaller than the target layout
+      // Apply transformations
       if (scale < 1) {
         iframe.style.width = virtualWidth + 'px';
-        iframe.style.height = (wrapper.offsetHeight / scale) + 'px';
+        iframe.style.height = virtualHeight + 'px';
         iframe.style.transform = `scale(${scale})`;
-        iframe.style.transformOrigin = 'top left';
       } else {
         iframe.style.width = '100%';
         iframe.style.height = '100%';
@@ -58,9 +122,30 @@ This document outlines the internal infrastructure of the **wompmacho** homelab.
       }
     }
 
-    // Run on load and whenever the screen updates
+    // --- FULLSCREEN INTERACTION CONTROLS ---
+    fsButton.addEventListener('click', () => {
+      if (!document.fullscreenElement) {
+        container.requestFullscreen().catch(err => {
+          console.error(`Error attempting to enable fullscreen: ${err.message}`);
+        });
+        fsButton.querySelector('span').textContent = 'Exit';
+      } else {
+        document.exitFullscreen();
+        fsButton.querySelector('span').textContent = 'Fullscreen';
+      }
+    });
+
+    document.addEventListener('fullscreenchange', () => {
+      if (!document.fullscreenElement) {
+        fsButton.querySelector('span').textContent = 'Fullscreen';
+      }
+      setTimeout(scaleIframe, 75);
+    });
+
     scaleIframe();
-    window.addEventListener('resize', scaleIframe);
+    window.addEventListener('resize', () => {
+      setTimeout(scaleIframe, 50);
+    });
   });
 </script>