fix(title): enabled long strings to wrap

[mcoker]

fixes #2661

[patternfly-build]

PatternFly-Next preview: https://patternfly-next-pr-2662.surge.sh

[boaz0]

Seems to fix the problem in most of the cases but if the description has a long URL it will overflow. Maybe using "anywhere"?

[mcoker]

@boaz0 can you give me an example? I tried this in both FF and chrome, doesn't overflow.

[boaz0]

Uhh... you'e right! I forgot to mention that if it's inside a flex layout it doesn't work.

  <div style={{display: 'flex'}}>
  <Title headingLevel="h1" style={{overflowWrap: "break-word"}} size="4xl">
    SuperDuperlooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongTitle
  </Title>

[mcoker]

@boaz0 ahh good find, that's due to a flex child's default min-width being the width of its contents. We can use word-break: break-word; there instead, which is similar and will allow the string to break in a flex child. Updated.

[boaz0]

LGTM 👍

[mattnolting]

LPTM

[christiemolloy]

lptm!!!

[redallen]

🎉 This PR is included in version 2.58.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀