Inconsistent length of .action-links DIV in plugin card

[kharisblank]

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.

[Otto42]

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.

[kharisblank]

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

[sabernhardt]

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]

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

[sabernhardt]

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

[sabernhardt]

Upper Sorbian Add New Plugin page, after applying patch

[sabernhardt]

Hungarian Add New Plugin page, after applying patch

[kharisblank]

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

[sabernhardt]

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, I support committing the first patch as it is.

[paresh07]

I have added patch for action link.

[paresh07]

In the core code, developers added word-break for the more details and I think this approach is correct.

I have added a patch for the 'More Details' action link issue. Please see https://core.trac.wordpress.org/attachment/ticket/48648/plugin-action-fix.patch

[sabernhardt]

removing the left margin from .plugin-action-buttons

[sabernhardt]

@paresh07 Thanks! And when creating your next patch, you will want to start from the main directory (wordpress-svn) instead of the "src" directory. (I've made that mistake before.)

Removing the 2em left margin keeps the "More details" link on one line when the primary action link is short, and larger action links continue to be aligned to the right side.

Patch 48648.diff has two edits:

1. Removing the left margin instead of re-setting it to zero
2. Adding a slight spacing between the description and the action link container (the icon is 128px, so I added 8 to the current margin value of 120)

[audrasjb]

Hi,

With 5.4 Beta 3 approaching and the Beta period reserved for bugs introduced during the cycle, this is being moved to WP 5.5. If any maintainer or committer feels this should be included or wishes to assume ownership during a specific cycle, feel free to update the milestone accordingly.

[SergeyBiryukov]

In 48120:

Plugins: Make the appearance of plugin action links on Add Plugins screen more consistent.

This ensures that the "More Details" link does not randomly wrap to a second line depending on the length of the button label above.

Props sabernhardt, kharisblank, Otto42, paresh07.
Fixes #48648.