Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52749 closed defect (bug) (fixed)

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

Reported by: sumitsingh's profile sumitsingh Owned by: audrasjb's profile 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 3 years ago.
Issue
6522034-486b9fca4902930030d2ef0998b68eda.png (50.3 KB) - added by sumitsingh 3 years ago.
Issue on Media Library page list
Posts ‹ Produc (1).png (109.1 KB) - added by sumitsingh 3 years 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 3 years 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 3 years 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 3 years ago.
Mobile.png (121.0 KB) - added by Hareesh Pillai 3 years ago.
Desktop.png (209.1 KB) - added by Hareesh Pillai 3 years ago.
Permalink Settings 1.png (257.4 KB) - added by Hareesh Pillai 3 years ago.
Screenshot showing text overflowing out of the page
Permalink Settings 2.png (294.3 KB) - added by Hareesh Pillai 3 years ago.
Permalink Settings with a long URL

Download all attachments as: .zip

Change History (34)

@sumitsingh
3 years ago

Issue

@sumitsingh
3 years ago

Issue on Media Library page list

@sumitsingh
3 years ago

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

@sumitsingh
3 years ago

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

#1 @SergeyBiryukov
3 years 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
3 years ago

  • Keywords has-screenshots added

#3 @audrasjb
3 years 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
3 years ago

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

@sahilmepani
3 years ago

#4 @sahilmepani
3 years ago

  • Keywords needs-patch removed

#5 @sahilmepani
3 years ago

  • Keywords has-patch added

#6 @peterwilsoncc
3 years 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
3 years ago

Sounds good, thanks @peterwilsoncc

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


3 years ago

#9 @audrasjb
3 years ago

  • Keywords needs-testing added

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

#10 @audrasjb
3 years 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.


3 years ago

#12 @audrasjb
3 years 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
3 years ago

  • Milestone changed from 5.7.1 to 5.8

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


3 years ago

#15 @ryelle
3 years ago

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

@Hareesh Pillai
3 years ago

#16 @Hareesh Pillai
3 years 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 years ago

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

@Hareesh Pillai
3 years ago

Screenshot showing text overflowing out of the page

@Hareesh Pillai
3 years ago

Permalink Settings with a long URL

#18 @Hareesh Pillai
3 years 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
3 years 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 opinion this is not a real or even edge case scenario.

Version 1, edited 3 years ago by sahilmepani (previous) (next) (diff)

#20 @Hareesh Pillai
3 years ago

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

#21 @audrasjb
3 years 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
3 years ago

Thank you, everyone!

#23 @ryelle
3 years 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
3 years 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.