[wp-trac] [WordPress Trac] #64686: Plugin name and description overlap with "Install Now" button in Japanese locale

[WordPress Trac]

#64686: Plugin name and description overlap with "Install Now" button in Japanese
locale
-------------------------------------+-------------------------------------
 Reporter:  hiroshisato              |       Owner:  joedolson
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  7.0
Component:  Administration           |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots admin-   |     Focuses:  ui, css,
  reskin has-patch commit            |  administration
-------------------------------------+-------------------------------------

Comment (by 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64686#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform