WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 2 months ago

#52749 closed defect (bug) (fixed)

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

Reported by: sumitsingh Owned by: audrasjb
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

Hi,

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

Attachments (10)

Posts ‹ Produc.png (55.5 KB) - added by sumitsingh 5 months ago.
Issue
6522034-486b9fca4902930030d2ef0998b68eda.png (50.3 KB) - added by sumitsingh 5 months ago.
Issue on Media Library page list
Posts ‹ Produc (1).png (109.1 KB) - added by sumitsingh 5 months ago.
Desktop view also, So i think we need to add word-break css for this issue
Permalink Settin.png (177.1 KB) - added by sumitsingh 5 months ago.
Permalink Settings page if big folder name then issue related overflow word also.
Screenshot_2021-03-16 Media Library ‹ WordPress Develop — WordPress.png (59.4 KB) - added by justinahinon 4 months ago.
In the media library list mode on mobile, when the file title is too long, it doesn't wrap correctly.
52749.diff (1.1 KB) - added by sahilmepani 4 months ago.
Mobile.png (121.0 KB) - added by Hareesh Pillai 3 months ago.
Desktop.png (209.1 KB) - added by Hareesh Pillai 3 months ago.
Permalink Settings 1.png (257.4 KB) - added by Hareesh Pillai 3 months ago.
Screenshot showing text overflowing out of the page
Permalink Settings 2.png (294.3 KB) - added by Hareesh Pillai 3 months ago.
Permalink Settings with a long URL

Download all attachments as: .zip

Change History (34)

@sumitsingh
5 months ago

Issue

@sumitsingh
5 months ago

Issue on Media Library page list

@sumitsingh
5 months ago

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

@sumitsingh
5 months ago

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

#1 @SergeyBiryukov
5 months ago

  • Component changed from General to Administration
  • Focuses ui css administration added
  • Summary changed from issue WordPress 5.7 running Twenty Nineteen theme with search post in post list admin side to Wrap long lines on Posts screen (search results), Media Library, and Permalink Settings

Hi there, thanks for the report!

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

#2 @SergeyBiryukov
5 months ago

  • Keywords has-screenshots added

#3 @audrasjb
5 months ago

  • Keywords needs-patch added; needs-design removed

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
4 months ago

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

@sahilmepani
4 months ago

#4 @sahilmepani
4 months ago

  • Keywords needs-patch removed

#5 @sahilmepani
4 months ago

  • Keywords has-patch added

#6 @peterwilsoncc
4 months ago

  • Milestone changed from Awaiting Review to 5.7.1

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.

#7 @sahilmepani
4 months ago

Sounds good, thanks @peterwilsoncc

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


4 months ago

#9 @audrasjb
4 months ago

  • Keywords needs-testing added

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

#10 @audrasjb
4 months ago

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

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


4 months ago

#12 @audrasjb
4 months ago

  • Version 5.7 deleted

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

#13 @audrasjb
4 months ago

  • Milestone changed from 5.7.1 to 5.8

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


4 months ago

#15 @ryelle
4 months ago

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

#16 @Hareesh Pillai
3 months ago

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

#17 @sahilmepani
3 months ago

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

@Hareesh Pillai
3 months ago

Screenshot showing text overflowing out of the page

@Hareesh Pillai
3 months ago

Permalink Settings with a long URL

#18 @Hareesh Pillai
3 months ago

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.

#19 @sahilmepani
2 months ago

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

Last edited 2 months ago by sahilmepani (previous) (diff)

#20 @Hareesh Pillai
2 months ago

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

#21 @audrasjb
2 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to reviewing

Thanks you all for your tests. Marking for commit.

#22 @sahilmepani
2 months ago

Thank you, everyone!

#23 @ryelle
2 months ago

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.

#24 @ryelle
2 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 50942:

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

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

Note: See TracTickets for help on using tickets.