fix callout in columns

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,
         }}

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);
-    }
-*/

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 {