Skip to content

Commit c746812

Browse files
authored
feature/MIG-6991 Wrap node title around header (#91)
* feature/MIG-6991 Wrap text around node header * feature/MIG-6991 Use word break instead * feature/MIG-6991 Fix back to original name
1 parent 5e26a80 commit c746812

File tree

2 files changed

+7
-6
lines changed

2 files changed

+7
-6
lines changed

src/components/node/node.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,8 @@ export const FieldsWithLongValues: Story = {
103103
args: {
104104
...INTERNAL_NODE,
105105
data: {
106-
title: 'rm_demo_collection_orders_table_equivalent',
106+
title:
107+
'enterprise_tenant_finance_department_legacy_system_us_east_1_schema_2025_v15_monthly_billing_transactions_20250702145533',
107108
fields: [
108109
{
109110
name: 'customerId',

src/components/node/node.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,20 @@ const NodeHeader = styled.div<{ background?: string }>`
6262
font-size: 13px;
6363
line-height: 20px;
6464
font-weight: bold;
65-
height: ${DEFAULT_NODE_HEADER_HEIGHT}px;
65+
min-height: ${DEFAULT_NODE_HEADER_HEIGHT}px;
6666
padding: ${spacing[100]}px ${spacing[400]}px ${spacing[100]}px ${spacing[200]}px;
6767
background: ${props => props.background};
68-
${ellipsisTruncation};
6968
`;
7069

7170
const NodeHeaderIcon = styled.div`
7271
display: flex;
73-
flex: 0 0 ${spacing[400]}px;
7472
margin-left: ${spacing[100]}px;
73+
margin-right: ${spacing[100]}px;
7574
`;
7675

77-
const NodeHeaderTitle = styled.div`
78-
${ellipsisTruncation}
76+
export const NodeHeaderTitle = styled.div`
77+
overflow-wrap: break-word;
78+
min-width: 0;
7979
`;
8080

8181
const NodeHandle = styled(Handle)<{ ['z-index']?: number }>`

0 commit comments

Comments
 (0)