fix some pixel issues

Co-authored-by: pranavm2109 <mishrap@dickinson.edu>

Author: Shahir-47

cypress/integration/rendering/journey.spec.js

@@ -169,7 +169,7 @@ section Checkout from website
       { journey: { useMaxWidth: true } }
     );
 
-    let diagramStartX;
+    let diagramStartX, maxLineWidth;
 
     // Get the diagram's left edge
     cy.contains('foreignobject', 'Sign Up')
@@ -178,22 +178,17 @@ section Checkout from website
       })
       .then(() => {
         cy.get('text.legend').then(($lines) => {
-          // Check that there are two lines
+          // Check that there are multiple lines
           expect($lines.length).to.be.equal(9);
 
           // Check that all lines are under the max width
           $lines.each((index, el) => {
             const bbox = el.getBBox();
             expect(bbox.width).to.be.lte(320);
+            maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
           });
 
-          // check baseline margin between diagram and legend is maintained
-          const longestBBox = $lines.get(7).getBBox(); // longest Line's bbox
-          if (diagramStartX && longestBBox) {
-            const legendRightEdge = longestBBox.x + longestBBox.width;
-            const margin = diagramStartX - legendRightEdge;
-            expect(margin).to.be.closeTo(150, 2);
-          }
+          expect(diagramStartX - 150).to.be.closeTo(maxLineWidth, 2);
         });
       });
   });

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -36,7 +36,7 @@ function drawActorLegend(diagram) {
 
     // First, measure the full text width without wrapping.
     let measureText = diagram.append('text').attr('visibility', 'hidden').text(person);
-    const fullTextWidth = measureText.node().getBBox().width;
+    const fullTextWidth = measureText.node().getBoundingClientRect().width;
     measureText.remove();
 
     let lines = [];
@@ -54,7 +54,7 @@ function drawActorLegend(diagram) {
         // check the width of the line with the new word.
         const testLine = currentLine ? `${currentLine} ${word}` : word;
         measureText.text(testLine);
-        const textWidth = measureText.node().getBBox().width;
+        const textWidth = measureText.node().getBoundingClientRect().width;
 
         if (textWidth > maxLabelWidth) {
           // If adding the new word exceeds max width, push the current line.
@@ -65,12 +65,12 @@ function drawActorLegend(diagram) {
 
           // If the word itself is too long, break it with a hyphen.
           measureText.text(word);
-          if (measureText.node().getBBox().width > maxLabelWidth) {
+          if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
             let brokenWord = '';
             for (const char of word) {
               brokenWord += char;
               measureText.text(brokenWord + '-');
-              if (measureText.node().getBBox().width > maxLabelWidth) {
+              if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
                 // Push the broken part with a hyphen.
                 lines.push(brokenWord.slice(0, -1) + '-');
                 brokenWord = char;
@@ -102,7 +102,7 @@ function drawActorLegend(diagram) {
 
       // Draw the text and measure the width.
       const textElement = svgDraw.drawText(diagram, labelData);
-      const lineWidth = textElement.node().getBBox().width;
+      const lineWidth = textElement.node().getBoundingClientRect().width;
 
       // Use conf.leftMargin as the initial spacing baseline,
       // but expand maxWidth if the line is wider.