From 6433cddb980602f20a097f35a994ab32774d04b9 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 24 Feb 2026 15:22:11 +0000
Subject: [PATCH] fix callout in columns

---
 .../components/callout/callout-view.tsx       |  1 +
 .../components/callout/callout.module.css     | 20 +++++++------------
 .../src/features/editor/styles/core.css       | 15 +++++++-------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/features/editor/components/callout/callout-view.tsx b/apps/client/src/features/editor/components/callout/callout-view.tsx
index 561947bb..3cf5bb57 100644
--- a/apps/client/src/features/editor/components/callout/callout-view.tsx
+++ b/apps/client/src/features/editor/components/callout/callout-view.tsx
@@ -23,6 +23,7 @@ export default function CalloutView(props: NodeViewProps) {
         icon={getCalloutIcon(type, icon)}
         p="xs"
         classNames={{
+          root: classes.root,
           message: classes.message,
           icon: classes.icon,
         }}
diff --git a/apps/client/src/features/editor/components/callout/callout.module.css b/apps/client/src/features/editor/components/callout/callout.module.css
index 2839b426..8289f1a7 100644
--- a/apps/client/src/features/editor/components/callout/callout.module.css
+++ b/apps/client/src/features/editor/components/callout/callout.module.css
@@ -1,9 +1,13 @@
+.root {
+  overflow: visible;
+}
+
 .icon {
   font-size: 24px;
   line-height: 1;
   width: 20px;
   height: 20px;
-  margin-inline-end: var(--mantine-spacing-md);
+  margin-inline-end: var(--mantine-spacing-xs);
   margin-top: 4px;
   cursor: pointer;
 }
@@ -11,18 +15,8 @@
 .message {
   font-size: var(--mantine-font-size-md);
   color: var(--mantine-color-default-color);
-
-  white-space: nowrap;
+  overflow: visible;
+  text-overflow: unset;
   word-break: break-word;
   overflow-wrap: break-word;
 }
-
-/*
-    @mixin where-light {
-        color: var(--mantine-color-default-color);
-    }
-
-    @mixin where-dark {
-        color: var(--mantine-color-default-color);
-    }
-*/
diff --git a/apps/client/src/features/editor/styles/core.css b/apps/client/src/features/editor/styles/core.css
index b4d07474..c1f67554 100644
--- a/apps/client/src/features/editor/styles/core.css
+++ b/apps/client/src/features/editor/styles/core.css
@@ -122,13 +122,14 @@
       margin-bottom: 0;
     }
 
-    &.node-callout {
-      div[style*="white-space: inherit;"] {
-        > :first-child {
-          margin: 0;
-        }
-      }
-    }
+  }
+
+  .react-renderer.node-callout div[style*="white-space: inherit;"] > :first-child {
+    margin-top: 0;
+  }
+
+  .react-renderer.node-callout + .react-renderer.node-callout {
+    margin-top: 0.75em;
   }
 
   .selection {