search

albingroen / prismabuilder.io

Build your Prisma schema visually in this easy-to-use web based tool
https://www.prismabuilder.io
278 stars 30 forks source link

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

Open urquico opened 4 months ago

urquico commented 4 months ago

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!