Authenticator error message overflows if message is long

[esauerbo]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React, Angular, Vue, React Native

Which UI component?

Authenticator, Primitive components

How is your app built?

next

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

If a long string is passed as an error message to the authenticator, the message will overflow outside of the container.

e.g.:

What's the expected behaviour?

The text should fit inside of the error container. One way would be to break up the string onto multiple lines, or the container could be made scrollable.

Help us reproduce the bug!

Hardcode a long string into the authenticator error message on any framework. E.g. on react, replace the translate(error) with a string here. Then force a form validation error by typing in an invalid email/password combo.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

No response

[reesscot]

@esauerbo This would only occur if there's a really long word in a paragraph, right?

[esauerbo]

@esauerbo This would only occur if there's a really long word in a paragraph, right?

@reesscot I was only able to reproduce with a really long word; multiple words were split onto new lines. But the error message from #5225 had whitespace that wasn't broken onto new lines, so we'll need to look into what happened there as well.