Skip to content

Resolve Text Overflow Issue in react-flow box component #83

@urquico

Description

@urquico

Hello, This project is amazing. However, I get an issue where text overflows beyond the boundaries of its container. This usually happens when the text length exceeds the size of the box. This can result to readability issues and potential loss of content.

Issue

When having a lengthy text within the node, the text extends beyond the alloted space of the box, causing overflow and disrupts the layout.

Expected Behavior

Text should be properly contained within the box and should either wrap or truncate to maintain readability and visual consistency

Steps to Reproduce:

Here's the prisma model that has an overflow issue when I use it on www.prismabuilder.io

model CustomerInvoicePayments{
  invoicePaymentId        Int @id @default(autoincrement())
}

Here's the result on using that model:
image

Proposed Solution

To address the issue, I think we wrap the text so that it will automaticall adjust based on the length of the string. or if the react-flow does not allow this, maybe we can make the text smaller? Also, I think this problem also occurs on the sub nodes of each main node

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions