From 2e2585a11e2815d10067b78d2e5e6fde620fa417 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 14 May 2026 00:58:51 +0100
Subject: [PATCH] fix(editor): hide transclusion borders and reset spacing in
 read-only mode

---
 .../transclusion-reference-view.tsx           |  1 +
 .../transclusion/transclusion-view.tsx        |  1 +
 .../transclusion/transclusion.module.css      | 31 ++++++++++++++++---
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx
index 490e179b2..e50793149 100644
--- a/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx
+++ b/apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx
@@ -35,6 +35,7 @@ export default function TransclusionReferenceView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.includeWrap}
+      data-editable={isEditable ? "true" : "false"}
       data-focused={isEditable && props.selected ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       contentEditable={false}
diff --git a/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx b/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx
index c27024472..82997f5d5 100644
--- a/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx
+++ b/apps/client/src/features/editor/components/transclusion/transclusion-view.tsx
@@ -62,6 +62,7 @@ export default function TransclusionView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.transclusionWrap}
+      data-editable={isEditable ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       data-id={transclusionId ?? undefined}
     >
diff --git a/apps/client/src/features/editor/components/transclusion/transclusion.module.css b/apps/client/src/features/editor/components/transclusion/transclusion.module.css
index 2fb5f7547..4d8d321a1 100644
--- a/apps/client/src/features/editor/components/transclusion/transclusion.module.css
+++ b/apps/client/src/features/editor/components/transclusion/transclusion.module.css
@@ -44,8 +44,29 @@
   transition: border 0.3s;
 }
 
-.transclusionWrap:hover,
-.transclusionWrap:focus-within {
+.transclusionWrap[data-editable="false"],
+.includeWrap[data-editable="false"] {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  padding: 0;
+}
+
+/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
+   so the synced block sits flush with surrounding paragraphs (whose own
+   margins already provide the right rhythm). */
+:global(.react-renderer.node-transclusionSource):has(
+    .transclusionWrap[data-editable="false"]
+  ),
+:global(.react-renderer.node-transclusionReference):has(
+    .includeWrap[data-editable="false"]
+  ) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.transclusionWrap[data-editable="true"]:hover,
+.transclusionWrap[data-editable="true"]:focus-within {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),
@@ -114,9 +135,9 @@
   transition: border 0.3s;
 }
 
-.includeWrap:hover,
-.includeWrap[data-focused="true"],
-.includeWrap[data-menu-open="true"] {
+.includeWrap[data-editable="true"]:hover,
+.includeWrap[data-editable="true"][data-focused="true"],
+.includeWrap[data-editable="true"][data-menu-open="true"] {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),