Admin: Fix plugin card overlap with localized install actions on Add Plugins#11820
Admin: Fix plugin card overlap with localized install actions on Add Plugins#11820itzmekhokan wants to merge 2 commits into
Conversation
Avoids overlap between long localized button labels and the plugin title or description. Props 369work. See #64686.
Use full remaining width for static action links and reset description margin for clearer layout. See #64686.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
There was a problem hiding this comment.
With these proposed changes, the links overlap content in new places.
Links on top of the thumbnail image at 1200 pixels wide:
Thumbnail images on top of description paragraphs at 1000 pixels:
Buttons with transparent background on top of long plugin names at 560 pixels:
I think the suggestion in the ticket involved either replacing some of the current rules or adding the new rules later in list-tables.css.
Fixes layout on Plugins → Add New where long translated strings for the install/update action (e.g. Japanese, Bengali, German, French) could overlap the plugin title and description. Compact buttons alone did not fully resolve this for all locales and widths (PR #11021, reopened in Trac).
Approach
.plugin-card .action-linksunder the plugin icon (top/left/ fixed width) so labels stay in the icon column instead of intruding on the text column; remove the largemargin-rightreserve on.name/.desc > pthat fought absolute positioning.max-width: 1100px+(min-width: 782px)ormax-width: 480pxquery): Give static.action-linksfull remaining width (calc(100% - 148px)) and reset.desc > pleft margin so the description area can use space more sensibly.CSS only:
src/wp-admin/css/list-tables.css(no PHP/HTML).Trac ticket: https://core.trac.wordpress.org/ticket/64686