fix(block-beta): normalize width before comparison in getMaxChildSize

[NYCU-Chung]

Summary

Fixes #7503

In getMaxChildSize, the comparison width > maxWidth uses the raw element width, but maxWidth stores the normalized per-column width (width / widthInColumns). This apples-to-oranges comparison causes maxWidth to shrink when a multi-column child's raw width exceeds the previous normalized value, even though its per-column width is smaller.

Root cause

Introduced in PR #6119 (commit ad9edf5), which correctly changed block.widthInColumns to child.widthInColumns in the divisor but did not update the comparison to also use the normalized value.

Example:

Step	Child	Raw width	widthInColumns	Normalized	maxWidth before	Comparison	maxWidth after
1	A	160px	1	160	0	160 > 0 ✓	160
2	B	200px	2	100	160	200 > 160 ✓	100 ← shrinks!

Child A is then allocated 100px, but its text needs 160px → text overflow / clipped.

Fix

Normalize width before the comparison so both sides use the same unit (per-column width):

-    if (width > maxWidth) {
-      maxWidth = width / (child.widthInColumns ?? 1);
+    const normalizedWidth = width / (child.widthInColumns ?? 1);
+    if (normalizedWidth > maxWidth) {
+      maxWidth = normalizedWidth;
     }

When all children have widthInColumns === 1 (the common case), behavior is identical — normalizedWidth === width. The fix only changes behavior for mixed column spans, restoring the correct pre-#6119 sizing.

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	368d5de
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69d65ec430718f00083e746b
😎 Deploy Preview	https://deploy-preview-7589--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 368d5de

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7589

mermaid

npm i https://pkg.pr.new/mermaid@7589

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7589

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7589

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7589

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7589

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7589

commit: 368d5de

[codecov]

Codecov Report

❌ Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.33%. Comparing base (bad4325) to head (368d5de).
⚠️ Report is 30 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/block/layout.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7589      +/-   ##
==========================================
- Coverage     3.33%   3.33%   -0.01%     
==========================================
  Files          536     535       -1     
  Lines        56240   56229      -11     
  Branches       820     820              
==========================================
- Hits          1877    1876       -1     
+ Misses       54363   54353      -10     

Flag	Coverage Δ
unit	3.33% <0.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/block/layout.ts	0.34% <0.00%> (-0.01%)	⬇️

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	2 changed, 1 added	Apr 8, 2026, 2:09 PM

[knsv-bot]

[sisyphus-bot]

Hey @NYCU-Chung — this is a really clean bug fix with an excellent root cause analysis! The PR description with the step-by-step table showing how maxWidth shrinks incorrectly made the bug immediately obvious. Great work tracing this back to #6119.

---

File Triage

Tier	Count	Files
Tier 2 (diff + context)	1	layout.ts
Tier 3 (diff only)	1	changeset

---

What's working well

🎉 [praise] The root cause analysis in the PR body is outstanding. The table showing how raw vs. normalized width comparison causes maxWidth to shrink from 160 → 100 makes the bug crystal clear. This is the gold standard for bug fix PR descriptions.

🎉 [praise] The fix itself is minimal and surgical — 3 lines changed, no collateral modifications. When all children have widthInColumns === 1 (the common case), behavior is identical, so there's zero risk of regressing single-column layouts.

🎉 [praise] Changeset is present with correct patch bump and descriptive message.

---

Things to address

🟡 [important] Missing E2E visual regression test

This fix corrects a rendering regression (diagram width shrinks from 1059px to 340px, text overflows). To prevent this from re-regressing, it would be great to add an E2E test case in cypress/integration/rendering/block.spec.js that reproduces the scenario from #7503 — specifically, mixing different column spans where a multi-column child's raw width exceeds the previous max.

A minimal reproduction would be something like:

it('should handle mixed column spans without shrinking column widths', () => {
  imgSnapshotTest(
    `block-beta
      columns 6
      PA["Paid proceeds (actual) $613"]:1 DEF["Deficit $5,155"]:5
      CA["Cash back (actual) $128"]:1 SPO["Spoilage (35 unsold) $5,640"]:5
    `,
    {}
  );
});

There are already several block-beta tests with column spans (:2, :3 etc.) in the spec file, so this would fit naturally alongside them.

---

Security

No XSS or injection issues. This is a pure arithmetic change in layout calculation — no user input handling is affected.

---

Self-check

• At least one 🎉 [praise] item exists (3)
• No duplicate comments
• Severity tally: 0 🔴 blocking / 1 🟡 important / 0 🟢 nit / 0 💡 suggestion / 3 🎉 praise
• Verdict matches criteria: COMMENT (1 🟡, no 🔴)
• Not a draft — COMMENT is appropriate
• No inline comments used
• Tone check: collaborative and appreciative ✓

[knsv]

@NYCU-Chung That was a quick response! 🤩 Happy to merge!

[mermaid-bot]

@NYCU-Chung, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.