WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 17 months ago

#36081 assigned defect (bug)

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

Reported by: Prelc Owned by: mrahmadawais
Milestone: Future Release Priority: normal
Severity: normal Version: 4.4.2
Component: Administration Keywords: has-patch has-ui-feedback dev-feedback
Focuses: ui, administration Cc:

Description

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

Attachments (9)

36081.png (259.7 KB) - added by swissspidy 2 years ago.
Screenshot of the bug (by @Prelc)
36081.patch (370 bytes) - added by chris_dev 2 years ago.
36081.2.diff (494 bytes) - added by mrahmadawais 2 years ago.
Cross browser compatible.
36081-before-after.png (268.8 KB) - added by metodiew 2 years ago.
36081.diff (801 bytes) - added by metodiew 2 years ago.
36081-standalone.diff (478 bytes) - added by metodiew 2 years ago.
36081.3.diff (1.8 KB) - added by mrahmadawais 2 years ago.
.wordwrap class added to dashboard.css and to the HTML where required.
36081.4.diff (2.1 KB) - added by metodiew 2 years ago.
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
36081.5.diff (1.1 KB) - added by kovshenin 20 months ago.

Download all attachments as: .zip

Change History (34)

@swissspidy
2 years ago

Screenshot of the bug (by @Prelc)

#1 @SergeyBiryukov
2 years ago

  • Component changed from Widgets to Administration
  • Focuses administration added
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

@chris_dev
2 years ago

#2 @mrahmadawais
2 years ago

  • Keywords has-patch added; needs-patch removed

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.

https://i.imgur.com/jXUNmgo.png

Submitted a new patch.

@mrahmadawais
2 years ago

Cross browser compatible.

#3 @Prelc
2 years ago

@mrahmadawais That looks great.

@metodiew
2 years ago

#4 @metodiew
2 years ago

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

#5 @Prelc
2 years ago

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

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

#6 follow-up: @SergeyBiryukov
2 years ago

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

#7 in reply to: ↑ 6 @mrahmadawais
2 years ago

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?

#8 @luancuba
2 years ago

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

#9 follow-up: @DrewAPicture
2 years ago

  • Owner set to mrahmadawais
  • Status changed from new to assigned

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

#10 in reply to: ↑ 9 @mrahmadawais
2 years ago

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?

#11 @DrewAPicture
2 years ago

  • Keywords ui-feedback added

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

@mrahmadawais
2 years ago

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

#12 follow-up: @mrahmadawais
2 years ago

  • Keywords dev-feedback added; good-first-bug removed

@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.

https://i.imgur.com/lXozQlG.png

Last edited 2 years ago by mrahmadawais (previous) (diff)

@metodiew
2 years ago

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

#13 in reply to: ↑ 12 ; follow-up: @metodiew
2 years ago

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

#14 in reply to: ↑ 13 @mrahmadawais
2 years ago

Replying to metodiew:

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

#15 follow-up: @karmatosed
21 months ago

  • Keywords has-ui-feedback commit added; ui-feedback removed
  • Milestone changed from Future Release to 4.7

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


20 months ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


20 months ago

#18 in reply to: ↑ 15 @jbpaul17
20 months ago

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

@kovshenin
20 months ago

#19 @kovshenin
20 months ago

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

#20 @DrewAPicture
20 months ago

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

#21 @helen
20 months ago

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?

This ticket was mentioned in Slack in #core by helen. View the logs.


20 months ago

#24 @helen
20 months ago

  • Keywords commit removed
  • Milestone changed from 4.7 to Future Release

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

#25 @SergeyBiryukov
17 months ago

#37555 was marked as a duplicate.

Note: See TracTickets for help on using tickets.