aws-amplify / aws-amplify/amplify-ui

Authenticator error message overflows if message is long

Open
#5,232 2 comments 0 reactions 0 assignees View on GitHub
Authenticator bug CSS
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#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.:
Screenshot 2024-05-09 at 11 37 01 AM

### 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](https://github.com/aws-amplify/amplify-ui/blob/3f3cb772f5fedd7581753dfcec3d68ca3659cb65/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx#L14). Then force a form validation error by typing in an invalid email/password combo.

### Code Snippet

```typescript
// Put your code below this line.

```

### Console log output

_No response_

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx, replacing the translated error with a long string as described and reproducing the invalid email/password validation case. Confirm that a long authenticator error remains within its container, either by wrapping the text or making the container scrollable, without overflowing.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, nextjs, react, react-native, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.