WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 12 days ago

#48648 reviewing defect (bug)

Inconsistent length of .action-links DIV in plugin card

Reported by: kharisblank Owned by: SergeyBiryukov
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Plugins Keywords: has-screenshots good-first-bug has-patch
Focuses: ui, administration Cc:
PR Number:

Description

Hello Core Team,

As this is really awesome as working with open source community of WordPress here.

I found inconsistent length of .action-links DIV when a plugin installed. This causes the "More Details" link in some other languages broken into two lines. It isn't looking good. And it should be consistent.

For easier identification where this little bug appears on, see these screenshots for reference.

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

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

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

Attachments (5)

plugin-action-buttons-width.1.diff (325 bytes) - added by kharisblank 3 weeks ago.
yoast-fr-before-patch.png (15.3 KB) - added by sabernhardt 3 weeks ago.
French "Update Now" button in WordPress 5.3 (in Firefox, without the patch)
yoast-fr-after-patch.png (15.3 KB) - added by sabernhardt 3 weeks ago.
French "Update Now" button cut off behind scroll bar after applying plugin-action-buttons-width.1.diff (Firefox, at 1366px window width)
plugins-hsb-after-patch.png (43.1 KB) - added by sabernhardt 3 weeks ago.
Upper Sorbian Add New Plugin page, after applying patch
plugins-hu-after-patch.png (46.8 KB) - added by sabernhardt 3 weeks ago.
Hungarian Add New Plugin page, after applying patch

Download all attachments as: .zip

Change History (12)

#1 follow-up: @Otto42
3 weeks ago

This seems to be because .plugin-action-buttons has no fixed width. It's getting the width of the button at the top plus a 2em margin-left. When the button is shorter than the text, the text wraps.

Making this wider to, say, about 120px or so should make it more consistent without allowing the text to interfere into the description area. The surrounding .action-links div has a 120px width, so matching that and eliminating the margin-left should allow it to fill the space that the div already has.

#2 in reply to: ↑ 1 @kharisblank
3 weeks ago

Replying to Otto42:

Thank you for adding extra details. I agree with you.

I found this fixes the issue.

.plugin-action-buttons {
  width: 100%;
}

Is there any simpler solution?

Regards,
Kharis

Last edited 3 weeks ago by kharisblank (previous) (diff)

#3 @Otto42
3 weeks ago

  • Keywords needs-patch good-first-bug added

#4 @SergeyBiryukov
3 weeks ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.4
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#5 @sabernhardt
3 weeks ago

Thanks @kharisblank for the patch! I tested it at various browser widths in Firefox, Chrome, Edge and Internet Explorer (all on Windows 10). That patch successfully makes the "More Details" links a consistent width throughout the Plugins page in each language.

This patch also keeps the primary action link from overlapping the Plugin Name, as can happen with some languages in WordPress 5.2 and 5.3. The widest links I noticed include the "Update Now" links in French, Malayalam and Tamil. With the patch, wider links extend beyond the "More Details" link instead (in some cases, outside the card and perhaps even off screen). So we can consider adding a comment for translators, which would recommend shorter length.

We also could reconsider the 120px width of the action-links container. The 2em side margin does not affect screen sizes where that container is positioned in the 120px right margin of the Name and Description containers. The "More Details" link in Upper Sorbian nearly touches the plugin description, and it is possible to get closer in another language.

.plugin-card .name,
.plugin-card .desc {
    margin-left: 148px;
    margin-right: 120px;
}

And maybe the discussion of additional changes belongs on a separate ticket.

@sabernhardt
3 weeks ago

French "Update Now" button in WordPress 5.3 (in Firefox, without the patch)

@sabernhardt
3 weeks ago

French "Update Now" button cut off behind scroll bar after applying plugin-action-buttons-width.1.diff (Firefox, at 1366px window width)

@sabernhardt
3 weeks ago

Upper Sorbian Add New Plugin page, after applying patch

@sabernhardt
3 weeks ago

Hungarian Add New Plugin page, after applying patch

#6 follow-up: @kharisblank
2 weeks ago

Hello @sabernhardt,

Thank you for testing it. You are right, my first patch has a lot of weakness.

If we could use ellipsis on longer primary action button text on other language, here's CSS code correction I would like to suggest.

.plugin-action-buttons {
	min-width: 120px;
}

.plugin-action-buttons a {
	max-width: 120px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
}

So we can consider adding a comment for translators, which would recommend shorter length.

If ellipsis would make it worse, all translators should correct and use shorter text.

Best,
Kharis

#7 in reply to: ↑ 6 @sabernhardt
2 weeks ago

Replying to kharisblank:

The patch isn't weak; it simply might be improved in some way :)

If ellipsis would make it worse, all translators should correct and use shorter text.

Hiding text overflow would make it worse, though. For example, if the word for "Now" happens to come first in a translation for "Activate Now" or "Update Now", the more important word could be hidden/truncated. Trimming the overflow would also trim any links that are 121-140 pixels wide; however, extending into the padding area within the border should be acceptable. Since I only noticed a significant overflow there for a few languages' "Update Now" links, I would lean toward editing that text instead of the CSS. Doing that would be outside the scope of this ticket, so let's leave that discussion for another ticket.

I still would like to increase the right margin of the name and description containers (perhaps an arbitrary 130px) to make sure there is a small gap between them and the action links. If anyone thinks adding a gap makes the name and description containers too narrow at certain screen sizes, though, I would support committing the first patch as it is.

Last edited 12 days ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.