Wrap long lines on Posts screen (search results), Media Library, and Permalink Settings

[sumitsingh]

Hi,

i have find the UI issue on WordPress 5.7 running Twenty Nineteen theme. you can see mentioned screenshot.

[sumitsingh]

Issue

[sumitsingh]

Issue on Media Library page list

[sumitsingh]

Desktop view also, So i think we need to add word-break css for this issue

[sumitsingh]

Permalink Settings page if big folder name then issue related overflow word also.

[SergeyBiryukov]

Hi there, thanks for the report!

Just linking to some related tickets here: #41559, #47329.

[audrasjb]

Replace needs-design with needs-patch as we can directly propose a CSS patch for those small text overflow edge cases, no need for specific design work here.

[justinahinon]

In the media library list mode on mobile, when the file title is too long, it doesn't wrap correctly.

[peterwilsoncc]

Putting this on 5.7.1, it's a desirable fix but if adding the word wrapping rules in CSS proves too fragile it might need to slip to a later release.

[sahilmepani]

Sounds good, thanks @peterwilsoncc

[audrasjb]

Adding needs-testing keyword, to ensure the proposed patch doesn't introduce any side effect.

[audrasjb]

And it would be nice to check other list tables as well :)

[audrasjb]

Hello there,

Thanks for the patch. Let's move this one to the next major release (5.8) as it would be nice to give it some time for better beta testing, to make sure it doesn't introduce any side effect. Also, it's not clear the issue was introduced in 5.7.

Thanks

[ryelle]

@meetshevene has volunteered to test out the patch. Thanks!

[Hareesh Pillai]

Tested the patch on Desktop and mobile. While the issue is resolved in the list tables, I could still see it in the Permalink Settings page (on desktop).

[sahilmepani]

@hareesh-pillai I am not able to reproduce the issue you mentioned. Can you provide me a screenshot please?

[Hareesh Pillai]

Screenshot showing text overflowing out of the page

[Hareesh Pillai]

Permalink Settings with a long URL

[Hareesh Pillai]

As we can see in the above screenshots, the text overflows out of the screen in the Permalink Settings page.

However, it seems to be fine when I'm using a really long URL. The issue presents only when I tested with a long text.

[sahilmepani]

@hareesh-pillai The permalink radio option text you mentioned is not editable from the backend. The only way to edit the text is by using inspect tool. In my humble opinion this is not a real or even edge case scenario.

[Hareesh Pillai]

I agree with you @sahilmepani. This patch looks good otherwise. :)

[audrasjb]

Thanks you all for your tests. Marking for commit.

[sahilmepani]

Thank you, everyone!

[ryelle]

The changes to the row actions (removing that 70px margin) has an unexpected side-effect on larger screens, where the row actions wrap under the image. There's another ticket, #47895, which has to do with these row actions on smaller screens.

The search term change is a good one though, so I'll commit that :)

And with the decision to leave permalinks alone, moving the row actions changes to #47895, & the commit here, I think that addresses all the issues.

[ryelle]

In 50942:

Administration: List Tables: Wrap long search terms onto a new line.

Props sumitsingh, audrasjb, justinahinon, sahilmepani, hareesh-pillai.
Fixes #52749.