fix: adjust mermaid text styling and defer initialization until fonts are fully loaded to ensure correct layout rendering

resources/views/front/career/index.blade.php

@@ -480,6 +480,7 @@
   .mermaid text,
   .mermaid .node .label {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2) !important;
+    padding: 2px 8px !important;
   }
 
   .mermaid .node.decisionNode .nodeLabel,
@@ -516,7 +517,7 @@
 <script>
   // Initialize Mermaid
   mermaid.initialize({
-    startOnLoad: true,
+    startOnLoad: false,
     theme: 'neutral',
     securityLevel: 'loose',
     flowchart: {
@@ -525,6 +526,21 @@
     }
   });
 
+  // Run mermaid after all fonts are fully loaded to ensure boxes match the text dimensions perfectly
+  if (document.fonts) {
+    document.fonts.ready.then(function() {
+      mermaid.run({
+        nodes: document.querySelectorAll('.mermaid')
+      });
+    });
+  } else {
+    window.addEventListener('load', function() {
+      mermaid.run({
+        nodes: document.querySelectorAll('.mermaid')
+      });
+    });
+  }
+
   // Fullscreen toggle logic for Mermaid card
   function toggleFullscreen() {
     const card = document.getElementById('mermaid-card');