Activity dashboard widget is not using word-wrap: break-word

[Prelc]

Long word's without spaces goes out of the container.

I think that this class #dashboard-widgets a needs word-wrap: break-word;

Screenshot: ​http://www.awesomescreenshot.com/image/1048253/7b7bc297dd3c3bd1f3c9532dd9f1138e

[swissspidy]

Screenshot of the bug (by @Prelc)

[mrahmadawais]

Hey, @Prelc!
Thanks for reporting the bug, welcome here.

@chris_dev I think we can make it more cross compatible for IE and Firefox.

I improved your patch, and it works pretty well both in IE8 and Firefox.

Submitted a new patch.

[mrahmadawais]

Cross browser compatible.

[Prelc]

@mrahmadawais That looks great.

[metodiew]

I found a similar issue in WordPress News Dashboard Widget too. I'm not sure if this the patch should be part of this ticket, but I'm attaching two versions: an updated version of @mrahmadawais patch and a version with the standalone fix, following the same format.

In 36081-before-after.png you can see the before-after result

[Prelc]

I found another similar bug in widgets but i opened separate ticket since i think it will be easier to track. #36207

[SergeyBiryukov]

Seems like we should introduce a common class for this, something like .wordwrap or .breakword.

[mrahmadawais]

Replying to SergeyBiryukov:

Seems like we should introduce a common class for this, something like .wordwrap or .breakword.

Makes sense, let me know if I should proceed with it?

[luancuba]

I agree with @SergeyBiryukov, the best way is create a common class.

[DrewAPicture]

Assigning to mark the good-first-bug as "claimed".

[mrahmadawais]

Replying to DrewAPicture:

Assigning to mark the good-first-bug as "claimed".

Thanks for that Drew @DrewAPicture . I will get to it by the end of this week. Moreover, do you have any thoughts about where should the class be added? Should it be in wp-admin/css/dashboard.css or wp-admin/css/common.css file?

[DrewAPicture]

@mrahmadawais: I'd say probably dashboard.css since that's where the bulk of dashboard widget styles live.

[mrahmadawais]

.wordwrap class added to dashboard.css and to the HTML where required.

[mrahmadawais]

@DrewAPicture @metodiew @SergeyBiryukov @Prelc
I have created a class called .wordwrap which exists inside dashboard.css.

This utility class is being used to address word overflow issues inside the rss-widgets and activity-widget.

[metodiew]

While I tested the patch I found we've missed the "At a Glance" widget. I really doubt if anyone is going to add that long word, but I've updated the patch and added the new class to this widget too, just in case

[metodiew]

Replying to mrahmadawais:

Thanks for the class, it's working really well on my end!

I've noticed one more issue and I've refreshed your patch, see ​with-36081.3.png and ​with-36081.4.png

[mrahmadawais]

Replying to metodiew:

Thanks for that. Looking forward to @DrewAPicture feedback :)

[karmatosed]

Visually this looks a good patch, @DrewAPicture do you think you can comment as you were walking through this ticket from a code view? It would rock to get this into 4.7.

[jbpaul17]

Replying to karmatosed:
@mrahmadawais confirmed that this looked good to him. @DrewAPicture any concerns before this could be committed?

[kovshenin]

Instead of adding the class to individual elements, we could add it next to the inside class for all metaboxes in general, which covers all current and future dashboard widgets, including custom ones, which may or may not be a good thing. It also affects metaboxes on "Edit Post" and other screens.

See 36081.5.diff​

[DrewAPicture]

+1 for @kovshenin's approach in 36081.5.diff​. All about future compatibility :-)

[helen]

I'm not sure I agree about using a utility class for this. Is there a reason it's necessary on its own as opposed to being applied contextually to existing selectors? And if we do go that route, should this apply to other places that use the .inside class?

[Presskopp]

related: #37555

[helen]

Punting because not sold on approach, and not new to 4.7.

[SergeyBiryukov]

#37555 was marked as a duplicate.

[Presskopp]

related: #36081, #37176, #37582, #37617, #37581, ..?

[sabernhardt]

#61973 was marked as a duplicate.