Plugin name and description overlap with "Install Now" button in Japanese locale

[hiroshisato]

In the plugin installation screen, the plugin name and description overlap with the "Install Now" button when the site language is set to Japanese.
This issue does not occur when the site language is set to English.
The issue also occurs in WordPress Playground with no additional plugins installed.

Steps to reproduce

1.Log in to the WordPress admin dashboard.
2.Go to "Plugins" → "Add New".
3.Set the site language to Japanese.
4.View the plugin cards.

Expected behavior

The plugin name, description, and "Install Now" button should be properly spaced and not overlap, regardless of the selected site language.

Actual behavior

The plugin name and description visually collide with the "Install Now" button in the card layout when the site language is Japanese.

Possible cause

It appears that the button width increases in the Japanese locale, while the available width for the plugin title and description does not adjust accordingly. This issue may also occur in other languages with longer button labels.

Environment

WordPress version: 7.0-beta-1
PHP version: 8.5
Browser: Safari 26.3 and Brave 1.87.188 (Chromium 145.0.7632.76)
OS: macOS Tahoe 26.3
Tested in: WordPress Playground

[hiroshisato]

japanese screenshot

[audrasjb]

Same here on fr_FR. See screenshot below.

[huzaifaalmesbah]

I am facing the same issue in the Bengali language as well.

[joedolson]

This is not technically a new problem; it just occurs more easily now that the button is larger. However, long texts will cause the same button overlap in the current 6.9 release.

It's still probably a visual regression we should address; but it's really an inherent problem in the usage of absolute positioning to layout the plugin cards, which precedes this change. The card design allows a fixed width of space for those buttons.

The easiest change would probably be to use the compact button design for the plugin card buttons, which is the same solution used for theme cards.

Switches to the compact button design in plugin cards.

The compact buttons are still a little wider, but it's less of an issue. Will probably need further tweaks; the old buttons had 20px of horizontal padding, the new compact buttons have 24.

Trac ticket: https://core.trac.wordpress.org/ticket/64686

## Use of AI Tools

None

[huzaifaalmesbah]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11021

Environment

• WordPress: 7.0-beta1-61709-src
• PHP: 8.2.29
• Server: nginx/1.29.5
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.2.29)
• Browser: Chrome 145.0.0.0
• OS: macOS
• Theme: Twenty Eleven 5.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Installed a clean WordPress 7.0-beta1 or trunk.
2. Logged in to the WordPress admin dashboard.
3. Navigated to Settings → General.
4. Changed Site Language to Japanese (ja)/ Bengali (bn_BD).
5. Went to Plugins → Add New.
6. Observed plugin cards in grid view.
7. Before applying the patch:
   • The plugin title and description overlapped with the “Install Now” button.
   • The button width increased due to localization.
   • Layout spacing did not adjust accordingly.

8. Applied the patch from PR
9. Repeated steps 4–6 in Japanese and Bengali locales.
10. ✅ Patch is solving the problem

Expected result

• Plugin title, description, and “Install Now” button should not overlap.
• Proper spacing should be maintained regardless of language.
• Layout should remain stable in languages with longer button labels.

Screenshots/Screencast with results

Before Apply Patch	After Apply Patch ✅

[audrasjb]

Thanks @joedolson, while this doesn't really fix the original layout issue of this screen, I wasn't able to reproduce the issue with these compact buttons anymore, at least on fr_FR.

I'm inclined to go with this implementation for 7.0.

[shailu25]

Test Report

This Report Validates that the indicated patch address the issue.✅

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11021

Environment:

WordPress - 7.0-beta1-20260223.221003
OS - Windows
Browser - Chrome
Theme: Twenty Twenty
PHP - 7.4.33
Plugin - None

Actual Results:

• Issue Resolved with Patch ✅ Plugin name and description is not overlap with "Install Now"

Supplemental Artifacts

• Attached

[shailu25]

Before Patch

[shailu25]

After Patch

[joedolson]

In 61729:

Admin: Switch plugin card buttons to compact size.

Following the admin reskin, the larger buttons in plugin cards caused an existing potential for text overlap to happen more easily. Switching to compact size restores prior behavior.

Props hiroshisato, audrasjb, huzaifaalmesbah, shailu25, joedolson.
Fixes #64686.

[hiroshisato]

Elementor

[hiroshisato]

MonsterInsights

[hiroshisato]

It looks like this issue has reappeared in WordPress 7.0 RC3.

The plugin name and the “Install Now” button are overlapping again on the Add Plugins screen.

In the previous discussion, this issue was not limited to Japanese. Similar layout problems were also reported in other locales, so this regression may affect languages other than Japanese as well.

This is not a major functional bug, but it is a visible layout issue on a screen that many users interact with. A broken layout on the plugin installation screen can make WordPress appear less polished.

I think this should be fixed before the final release if possible.

I reopened this ticket because the issue appears to be the same regression. However, if it would be better to handle this as a separate issue, I’m happy to create a new ticket or rewrite the report accordingly.

[369work]

I'd like to suggest a structural fix that prevents the overlap from recurring regardless of locale or button label length.

The current layout breaks differently depending on screen width:

• Desktop (>1100px): .action-links is position: absolute; width: 120px. "Install Now" fits, but translated labels — "今すぐインストール" (JA), "Jetzt installieren" (DE), "Installer maintenant" (FR) — overflow into the description area.
• Tablet (782–1100px): Switches to position: static; margin-left: 148px, which avoids the overlap but crushes the plugin name into an extremely narrow column, causing it to wrap across many lines.
• Mobile (<480px): Same margin-left: 148px rule applies. The description area is also unnecessarily narrow.

In short, there is no viewport width where the current layout works correctly.

Proposed fix: CSS only — no PHP or HTML changes required

Instead of fighting the existing position: absolute on .action-links, we keep it and simply move the button coordinates to sit directly below the plugin icon. The description's unnecessary margin-right compensation is also removed.

Tested on desktop (Nest Hub Max 1280×800 where the overlap was confirmed) and mobile (375px).

(See attached screenshots: desktop before/after and mobile before/after.)

/* Desktop: move button below icon, remove description margin compensation */
@media (min-width: 1101px) {
    .plugin-card .action-links {
        position: absolute;
        top: 152px;
        left: 20px;
        right: auto;
        width: 128px;
    }
    .plugin-card .desc > p, .plugin-card .name {
        margin-right: 0;
    }
}

/* Tablet and mobile: widen description area */
@media (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
    .plugin-card .action-links {
        margin-left: 148px;
        width: calc(100% - 148px);
    }
    .plugin-card .desc > p {
        margin-left: 0;
    }
}

This approach:

• Permanently fixes the overlap for all locales on desktop
• Improves the description width on tablet and mobile
• Changes only wp-admin/css/list-table.css — no PHP or HTML modifications required

Happy to prepare a formal patch if this direction looks good.

[369work]

[Imgur](​https://imgur.com/RputFFi)
[Imgur](​https://imgur.com/AFawwEm)
[Imgur](​https://imgur.com/LDbJq54)
[Imgur](​https://imgur.com/eloOGOk)
[Imgur](​https://imgur.com/4yVXIor)

I'd also suggest raising the severity from normal to major, since the layout breaks at every viewport width — desktop, tablet, and mobile.

[huzaifaalmesbah]

Hi, this issue is still present. I checked on 7.0 RC3 at 1280 px and 1600 px resolutions, and I can see the issue.

[wildworks]

It appears that two issues are being discussed here.

The first issue is the spacing between the plugin header and the plugin description text. This problem should have been resolved in both [61729] and [62290].

The second issue is that the plugin title and the "Install Now" button overlap. This problem became prominent with the introduction of the new design system in WordPress 7.0, but it was likely a latent issue that existed before. Therefore, strictly speaking, there are no longer any new regressions occurring in 7.0.

The second issue is that there's no fundamental solution as long as ​the plugin action links are absolutely positioned. This is because even if we change the margins or width to avoid overlap, it may not be optimal for all locales.

It would be best to rebuild the entire plugin card using a flex layout, but I'm unsure if that would be acceptable for the 7.0 release.

[wildworks]

One short-term solution is to increase the right margin for specific languages.

@media (min-width: 1101px) {
        .plugin-card .name, .plugin-card .desc > p {
                margin-right: 128px;
        }

        .plugin-card .name:lang(ja), .plugin-card .desc > p:lang(ja) {
                margin-right: 138px;
        }
}

The approach using the lang pseudo-class is also used on the about page. See [58979]

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

• Wide viewports (≥1101px): Position .plugin-card .action-links under the plugin icon (top / left / fixed width) so labels stay in the icon column instead of intruding on the text column; remove the large margin-right reserve on .name / .desc > p that fought absolute positioning.
• Tablet / small breakpoints (existing max-width: 1100px + (min-width: 782px) or max-width: 480px query): Give static .action-links full remaining width (calc(100% - 148px)) and reset .desc > p left margin so the description area can use space more sensibly.

CSS only: src/wp-admin/css/list-tables.css (no PHP/HTML).

[sabernhardt]

allows wide .button link text to wrap to another line, and aligns text to start instead of the right

[sabernhardt]

wrapping long link text to another line in French, at 1600 pixels wide with the admin menu collapsed

[sabernhardt]

It is very late to redo the layout for next week's release, and PR 11820 is not ready anyway.

One short-term solution is to increase the right margin for specific languages.

My "Update Now" link in French, with the icon, is more than 188 pixels wide. The translation lengths are highly variable, and they can change at any time.

The "Update Now" string with the 'plugin' context is only on the plugin install screen, so removing "now" from some long translations might be an option. However, "Install Now" is used on other screens, where it probably should not be abbreviated.

Allowing the .button link text to wrap to another line seems to be the safest temporary change. It still is not good, but it prevents overlapping. The worst part of this idea is probably when someone clicks the link and it changes height along with the text as it progresses from "Update Now" to "Updating..." to "Updated!" (or "Install Now", etc.).

I also considered adding a white background to these links. That probably is not safe enough, and the links still would overlap plugin names as they did in 6.9 (with an additional four pixels to their width).

.plugin-action-buttons li .button:not(.button-primary) {
	background: #fff;
}

Partially related: #48648

[audrasjb]

Hello, I think it's a bit too late for this to be fixed in 7.0, as we don't have a solid and long term solution for now.
What I suggest is to move this ticket to 7.0.1 and to post a heads up in the #polyglots Slack channel. For example, on our side, we could update the fr_FR translation strings to remove "Now" (which translates "Maintenant") from our translation strings and just keep "Update", "Install", etc., as the interface is not designed to accept any text length.

[wildworks]

Allowing the .button link text to wrap to another line seems to be the safest temporary change.

This feels very unnatural to me. The space between the wrapped text is too large because the current button is ​using a very large value for line-height to express its height, in addition to min-height. In other words, the current button is not designed to have its text wrap.

What I suggest is to move this ticket to 7.0.1 and to post a heads up in the #polyglots Slack channel.

I agree with this

[audrasjb]

Removing trunk version as this is not going to be shipped with WP 7.0 but in the next releases.

[desrosj]

Replying to joedolson:

This is not technically a new problem; it just occurs more easily now that the button is larger. However, long texts will cause the same button overlap in the current 6.9 release.

Since this is made worse in the 7.0 release, going to leave trunk as the version (trunk is renamed to the numbered version upon release, so it will point to 7.0 after tomorrow).

[wildworks]

I'd like to consider how we should proceed with this ticket. As a short-term solution, would it be to shorten the word length by not translating "Now" in the locale where the problem is occurring, rather than fixing the core code? If so, I suggest changing the milestone for this ticket to 7.1 and working on a long-term solution.

[joedolson]

It seems to me like the fundamental problem is the use of absolute positioning & floats; this is always a fragile method of arranging content, and making CSS changes to remove that may be the best idea.

I'd propose just adjusting the CSS for the card so that it uses more modern layout techniques.

The layout itself is easily reproduced; but I think it'll need to have HTML modified, which is not something I think we should do in a minor release. There are definitely existing extenders that are using the plugin-card component structure and CSS, so we'd probably need to take that into consideration, as well.

The polyglot decision might be possible, but probably just needs to be a per-translation decision to make.

[369work]

@joedolson

I agree that moving away from absolute positioning is the right direction.
In my earlier comment (comment:11), I proposed a CSS-only approach that repositions .action-links below the plugin icon rather than alongside the text — effectively removing the conflict between the button and the description area without touching PHP or HTML. It also widens the description column on tablet and mobile.

It's not a full flex layout rebuild, but it could serve as a practical stopgap until a more complete restructuring is planned.