Toast error message is cut off #7207

New issue

Closed

opened 2021-10-01 16:41:15 +02:00 by klomontes · 4 comments

klomontes commented

2021-10-01 16:41:15 +02:00

(Migrated from github.com)

Bug
Toast error message is cut off on the right hand side.

To Reproduce
I’ve created a channel and tried to comment only a few seconds after that. The error message just popped up.

Not sure if there is an easier way to reproduce this.

Expected behavior
The text message should be entirely visible.

Screenshots

**Bug** Toast error message is cut off on the right hand side. **To Reproduce** I’ve created a channel and tried to comment only a few seconds after that. The error message just popped up. Not sure if there is an easier way to reproduce this. **Expected behavior** The text message should be entirely visible. **Screenshots** ![image](https://user-images.githubusercontent.com/6605496/135637790-54dee362-0728-4407-8903-91df05a5458c.png)

dan-peterson commented

2021-10-01 21:24:03 +02:00

(Migrated from github.com)

Not sure if there is an easier way to reproduce this.

Yep, you can simulate any toast message by running this in the dev console:

window.app.store.dispatch({
	type: 'CREATE_TOAST',
	data: {
		id: 1,
		params: {
			message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1090520f64b340cf7ea5dd36c9ef7bff1090520f64b340cf7ea5dd36c9ef7bff'
		}
	}
});

@tzarebczan I can have a quick look in to this.

> Not sure if there is an easier way to reproduce this. Yep, you can simulate any toast message by running this in the dev console: ```js window.app.store.dispatch({ type: 'CREATE_TOAST', data: { id: 1, params: { message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. 1090520f64b340cf7ea5dd36c9ef7bff1090520f64b340cf7ea5dd36c9ef7bff' } } }); ``` @tzarebczan I can have a quick look in to this.

👍 1 ❤️ 1

dan-peterson commented

2021-10-03 21:53:35 +02:00

(Migrated from github.com)

It looks like the intended behaviour was to clip the text and show ellipses. I have a PR to fix that behaviour.

However, we could also consider a new approach and allow long words to break/wrap.

It looks like the intended behaviour was to clip the text and show ellipses. I have a PR to fix that behaviour. However, we could also consider a new approach and allow long words to break/wrap.

klomontes commented

2021-10-03 22:25:46 +02:00

(Migrated from github.com)

@dan-peterson thanks for taking interest in this issue.

I think wrapping the text would be a more suitable approach. It is important for the user to be able to read the entire message especially considering the severity of the alert. The toast can grow vertically or horizontally to accommodate the text.

Just by looking at the screenshot it seems that the long ID which seems to be longer than the maximum width of the toast is causing the problem. Setting word-break property would most likely solve this one.

With that said, not sure how breaking the ID into multiple lines would affect the usability of this error message. I suppose the whole point of having it in there is for the user to copy and paste it so that they can use it as a reference for the support if the problem doesn’t go away. Splitting it into multiple lines would make selection more difficult and harder to perceive as a single value.

@dan-peterson thanks for taking interest in this issue. I think wrapping the text would be a more suitable approach. It is important for the user to be able to read the entire message especially considering the severity of the alert. The toast can grow vertically or horizontally to accommodate the text. Just by looking at the screenshot it seems that the long ID which seems to be longer than the maximum width of the toast is causing the problem. Setting [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) property would most likely solve this one. With that said, not sure how breaking the ID into multiple lines would affect the usability of this error message. I suppose the whole point of having it in there is for the user to copy and paste it so that they can use it as a reference for the support if the problem doesn’t go away. Splitting it into multiple lines would make selection more difficult and harder to perceive as a single value.

dan-peterson commented

2021-10-03 23:47:34 +02:00

(Migrated from github.com)

@klomontes Yeah agreed. For an error message clipping of any kind doesn't make sense.

The intended behaviour (with the ellipses) might be desirable in other non-error contexts, but considering that it doesn't even seem to currently work as expected, I think we can assume that part isn't important right now.

not sure how breaking the ID into multiple lines would affect the usability of this error message.

In a mobile context I think we're prob stuck with wrapping. The only alternative would be scrolling, but that's arguably just as, if not more, confusing and cumbersome.

We could remove the fixed width on error toasts, so that on larger screens the message gets as much space as it needs.

There are some improvements we could consider down the road. Like adding a quick copy button, etc.

@klomontes Yeah agreed. For an error message clipping of any kind doesn't make sense. The intended behaviour (with the ellipses) might be desirable in other non-error contexts, but considering that it doesn't even seem to currently work as expected, I think we can assume that part isn't important right now. > not sure how breaking the ID into multiple lines would affect the usability of this error message. In a mobile context I think we're prob stuck with wrapping. The only alternative would be scrolling, but that's arguably just as, if not more, confusing and cumbersome. We could remove the fixed width on error toasts, so that on larger screens the message gets as much space as it needs. There are some improvements we could consider down the road. Like adding a quick copy button, etc.