fix: Ensure Mermaid diagrams are visible in fullscreen mode

- Added explicit visibility styles with !important flags
- Increased timeout to ensure Mermaid finishes rendering
- Added error handling for Mermaid rendering failures
- Ensured SVG elements are always visible in fullscreen
- Fixed width/height auto settings for proper display

Author: rayraycodes

docs_site/_layouts/default.html

@@ -622,6 +622,8 @@
         mermaidDiv.style.display = 'block';
         mermaidDiv.style.visibility = 'visible';
         mermaidDiv.style.opacity = '1';
+        mermaidDiv.style.width = 'auto';
+        mermaidDiv.style.height = 'auto';
         wrapper.appendChild(mermaidDiv);
 
         // Re-render with Mermaid
@@ -630,14 +632,45 @@
           if (svg) {
             svg.style.display = 'block';
             svg.style.visibility = 'visible';
+            svg.style.opacity = '1';
+            svg.style.width = 'auto';
+            svg.style.height = 'auto';
+            svg.style.maxWidth = 'none';
+            svg.style.maxHeight = 'none';
+            svg.removeAttribute('style'); // Remove any inline styles that might hide it
+            svg.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important;');
           }
+          
+          // Also ensure the mermaid div itself is visible
+          mermaidDiv.style.display = 'block';
+          mermaidDiv.style.visibility = 'visible';
+          mermaidDiv.style.opacity = '1';
+        }).catch((err) => {
+          console.error('Mermaid rendering error:', err);
+          // Fallback: clone the existing diagram
+          const clone = diagramElement.cloneNode(true);
+          clone.style.display = 'block';
+          clone.style.visibility = 'visible';
+          clone.style.opacity = '1';
+          wrapper.appendChild(clone);
         });
       } else {
         // Fallback: clone the existing diagram
         const clone = diagramElement.cloneNode(true);
         clone.style.display = 'block';
         clone.style.visibility = 'visible';
         clone.style.opacity = '1';
+        
+        // Ensure SVG in clone is visible
+        const svg = clone.querySelector('svg');
+        if (svg) {
+          svg.style.display = 'block';
+          svg.style.visibility = 'visible';
+          svg.style.opacity = '1';
+          svg.style.width = 'auto';
+          svg.style.height = 'auto';
+        }
+        
         wrapper.appendChild(clone);
       }
 
@@ -669,19 +702,29 @@
         wrapper.style.display = 'flex';
         wrapper.style.visibility = 'visible';
         wrapper.style.opacity = '1';
+        wrapper.style.width = 'fit-content';
+        wrapper.style.height = 'fit-content';
 
         const mermaidEl = wrapper.querySelector('.mermaid');
         if (mermaidEl) {
           mermaidEl.style.display = 'block';
           mermaidEl.style.visibility = 'visible';
           mermaidEl.style.opacity = '1';
+          mermaidEl.style.width = 'auto';
+          mermaidEl.style.height = 'auto';
         }
 
         const svg = wrapper.querySelector('svg');
         if (svg) {
           svg.style.display = 'block';
           svg.style.visibility = 'visible';
           svg.style.opacity = '1';
+          svg.style.width = 'auto';
+          svg.style.height = 'auto';
+          svg.style.maxWidth = 'none';
+          svg.style.maxHeight = 'none';
+          // Force visibility with important
+          svg.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;');
         }
 
         // Center scroll position
@@ -693,7 +736,7 @@
             content.scrollLeft = (content.scrollWidth - content.clientWidth) / 2;
           }
         }, 200);
-      }, 300);
+      }, 500); // Increased timeout to ensure Mermaid has finished rendering
 
       // Focus on close button for accessibility
       const closeBtn = overlay.querySelector('.close-fullscreen-btn');