gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-10-14 17:19:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix clipped Mermaid labels at fractional browser zoom (RND-12469)

Browse Source 
Mermaid wraps an HTML label only when its measured width equals the
wrapping width exactly. At some browser zoom levels (e.g. 90% and 175% in
Chrome) getBoundingClientRect returns 200.00001 instead of 200, so long
labels stay on one line and are clipped by the foreignObject. Patch Mermaid
to compare the rounded width.
This commit is contained in:
Peter White
2026-10-14 10:37:31 +02:00
parent 8ca1b109ee
commit de56ee21cf
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/DocumentView/CodeBlock/mermaid-runtime-path.ts
+1 -1
View File
@@ -1 +1 @@
export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-patch.b4f92f7b-zenuml@0.2.2.mjs';
export const MERMAID_RUNTIME_PATH = 'mermaid/mermaid@11.14.0-patch.caefc3e9-zenuml@0.2.2.mjs';
patches/mermaid@11.14.0.patch
+13
View File
@@ -11,3 +11,16 @@ index f37722f2f65d3c49904ec704998a9a0ce6f01d21..0b97ddef583d120235530222990f08db
db2.setBlock(obj);
nodeEl.remove();
}
diff --git a/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs b/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
index 6f5ff605824cec370f0ff1077fe3005823fa59f5..1468e9b37b3c1ef3449774b816202e3143174476 100644
--- a/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
+++ b/dist/chunks/mermaid.core/chunk-U2HBQHQK.mjs
@@ -308,7 +308,7 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false,
div.attr("class", "labelBkg");
}
let bbox = div.node().getBoundingClientRect();
- if (bbox.width === width) {
+ if (Math.round(bbox.width) === width) {
div.style("display", "table");
div.style("white-space", "break-spaces");
div.style("width", width + "px");