From f71983d41c7d720b9ff9fb511927cc3dd3eb17d0 Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Fri, 24 Oct 2025 15:38:57 +0200
Subject: [PATCH] fix: hotfix for COMPASS-9739

---
 .../src/components/diagram-editor.tsx              | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx
index 5009c350d93..6f5a148bc55 100644
--- a/packages/compass-data-modeling/src/components/diagram-editor.tsx
+++ b/packages/compass-data-modeling/src/components/diagram-editor.tsx
@@ -89,6 +89,19 @@ const bannerButtonStyles = css({
   marginLeft: 'auto',
 });
 
+/**
+ * This is a hotfix for COMPASS-9738 where collection names spanning over
+ * multiple lines are not accounted for properly in the diagramming package.
+ * TODO(COMPASS-9738): Remove this hotfix once we have a proper solution in place.
+ */
+const diagramStyles = css({
+  '[data-nodeid] + div > div > div:first-child > div:nth-child(2)': {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+});
+
 const ErrorBannerWithRetry: React.FunctionComponent<{
   onRetryClick: () => void;
 }> = ({ children, onRetryClick }) => {
@@ -442,6 +455,7 @@ const DiagramContent: React.FunctionComponent<{
           // dragging.
           nodeDragThreshold={5}
           fitViewOptions={ZOOM_OPTIONS}
+          className={diagramStyles}
         />
       </div>
     </div>