feature/MIG-6991 Wrap text around node header

Author: lchans

src/components/node/node.stories.tsx

@@ -103,7 +103,8 @@ export const FieldsWithLongValues: Story = {
   args: {
     ...INTERNAL_NODE,
     data: {
-      title: 'rm_demo_collection_orders_table_equivalent',
+      title:
+        'enterprise_tenant_finance_department_legacy_system_us_east_1_schema_2025_v15_monthly_billing_transactions_20250702145533',
       fields: [
         {
           name: 'customerId',

src/components/node/node.tsx

@@ -62,20 +62,17 @@ const NodeHeader = styled.div<{ background?: string }>`
   font-size: 13px;
   line-height: 20px;
   font-weight: bold;
-  height: ${DEFAULT_NODE_HEADER_HEIGHT}px;
+  min-height: ${DEFAULT_NODE_HEADER_HEIGHT}px;
   padding: ${spacing[100]}px ${spacing[400]}px ${spacing[100]}px ${spacing[200]}px;
   background: ${props => props.background};
-  ${ellipsisTruncation};
+  overflow-wrap: anywhere;
 `;
 
 const NodeHeaderIcon = styled.div`
   display: flex;
   flex: 0 0 ${spacing[400]}px;
   margin-left: ${spacing[100]}px;
-`;
-
-const NodeHeaderTitle = styled.div`
-  ${ellipsisTruncation}
+  margin-right: ${spacing[100]}px;
 `;
 
 const NodeHandle = styled(Handle)<{ ['z-index']?: number }>`
@@ -170,7 +167,7 @@ export const Node = ({
                 <NodeHeaderIcon>
                   <Icon fill={theme.node.headerIcon} glyph="Drag" />
                 </NodeHeaderIcon>
-                <NodeHeaderTitle>{title}</NodeHeaderTitle>
+                <span>{title}</span>
               </>
             )}
           </NodeHeader>