stackernews / stacker.news

Internet communities that pay you Bitcoin
https://stacker.news
MIT License
432 stars 112 forks source link

Notifications with post titles without word breaks overflow horizontally #1125

Closed SatsAllDay closed 6 months ago

SatsAllDay commented 6 months ago

Description On mobile, when viewing the notifications page, if a notification references a post that has a very long single word in it, the word is not broken via css, and therefore the notification overflows in the x-direction.

Steps to Reproduce

  1. Somehow get notified of a post that has a very long word in the title
  2. View notifications page

Expected behavior Post titles and links in notifications should probably have some CSS word break behavior so that long words in titles don't cause overflow

Screenshots IMG_9970 IMG_9969 IMG_9968 IMG_9967

Logs N/A

Environment: Likely only an issue on mobile, not desktop

Additional context N/A

benalleng commented 6 months ago

I am not able to reproduce this bug at the moment. tested with comment and zap notifications

The only thing I need to do more testing with is once the notification is hidden beyond the "more" notifications button perhaps there is some width that it overflows where it doesn't if the notification is contained in an initial render of /notifications

benalleng commented 6 months ago

Do you remember how you created these seemingly unbreakable strings? lol I found it on prod under your items and it seems to be the only one that does this.

benalleng commented 6 months ago

Ok, so a little deeper It seems to only be a problem on chrome, firefox seems to break this link title normally

SatsAllDay commented 6 months ago

It happens for me on iOS PWA too, meaning safari as well

benalleng commented 6 months ago

Ok, I Guess firefox handles word-breaks for links where the others do not