Page MenuHomePhabricator

Long words overflow the bubble notification container
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Open the JS console on any wikipage
  • Run the following line: mw.notify( 'argeagreargaeriugbaoieubjbknryneqoiubieqpeiurbiubqouyrbpieqtqeiurbiueqyviuvqerfqergeqihbioqneroqeir' )

What happens?:
The content of the notifications overflows the container and is partially hidden from view, as shown below:

image.png (134×610 px, 10 KB)

What should have happened instead?:
The text should wrap.

Event Timeline

Change #1019287 had a related patch set uploaded (by Cmelo; author: Cmelo):

[mediawiki/core@master] Fix long words overflow the bubble notification container

https://gerrit.wikimedia.org/r/1019287

Change #1019287 merged by jenkins-bot:

[mediawiki/core@master] Fix long words overflow the bubble notification container

https://gerrit.wikimedia.org/r/1019287

vaughnwalters subscribed.

✅ The text is correctly wrapping now. Marking as done / resolved

chrome firefox safari edge
Screenshot 2024-04-23 at 5.09.29 PM.png (1×2 px, 337 KB)
Screenshot 2024-04-23 at 5.15.09 PM.png (770×3 px, 311 KB)
Screenshot 2024-04-23 at 5.13.45 PM.png (1×1 px, 191 KB)
Screenshot 2024-04-23 at 5.16.50 PM.png (1×884 px, 192 KB)

Opening this back up. @cmelo check out the following two examples. While this patch does fix the problem of really long words wrapping, it also introduces the issue of shorter words wrapping where they shouldn't.

log inlog out
Screenshot 2024-04-23 at 9.48.03 PM.png (986×2 px, 421 KB)
Screenshot 2024-04-23 at 9.47.35 PM.png (864×2 px, 676 KB)

Change #1023841 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[mediawiki/core@master] mediawiki.notification: Use break-word instead of break-all

https://gerrit.wikimedia.org/r/1023841

Change #1023841 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.notification: Use break-word instead of break-all

https://gerrit.wikimedia.org/r/1023841

Opening this back up. @cmelo check out the following two examples. While this patch does fix the problem of really long words wrapping, it also introduces the issue of shorter words wrapping where they shouldn't.

log inlog out
Screenshot 2024-04-23 at 9.48.03 PM.png (986×2 px, 421 KB)
Screenshot 2024-04-23 at 9.47.35 PM.png (864×2 px, 676 KB)

✅ This is fixed now

log in log in log out running mw.notify( ... )
Screenshot 2024-04-24 at 4.08.13 PM.png (1×2 px, 374 KB)
Screenshot 2024-04-24 at 3.51.23 PM.png (1×2 px, 366 KB)
Screenshot 2024-04-24 at 4.13.46 PM.png (1×2 px, 796 KB)
Screenshot 2024-04-24 at 4.15.04 PM.png (598×2 px, 356 KB)

The content of the notifications no longer overflow and break in the correct places.

marking as done / resolved.