Merge pull request #11068 from growilabs/fix/11052-drawio-foreignobject-css-leak

fix(drawio): Prevent host CSS leaking into <foreignObject>

packages/remark-drawio/src/components/DrawioViewer.module.scss

@@ -7,3 +7,23 @@
 .drawio-viewer * {
   box-sizing: content-box;
 }
+
+// Revert host-page CSS that leaks into HTML rendered inside <foreignObject>.
+// drawio sizes each cell using UA-default HTML metrics and clips overflow via
+// an inline max-height wrapper, so non-default styles (e.g. line-height,
+// margin from a wrapping `.wiki` ruleset) cause label content to be cut off.
+//
+// `!important` is required: host selectors such as `.wiki ol:not(.nav) li`
+// outrank our scoped selector on specificity (`:not(.nav)` adds a class-level
+// weight). Defending the foreignObject content is an adversarial cross-cutting
+// concern, so we explicitly opt out of the specificity contest rather than
+// chasing host selectors.
+//
+// See: https://github.com/growilabs/growi/issues/11052
+.drawio-viewer foreignObject {
+  h1, h2, h3, h4, h5, h6,
+  p, ul, ol, li, blockquote,
+  img, video, table {
+    all: revert !important;
+  }
+}