Make WordPress Core

Opened 8 weeks ago

Closed 6 weeks ago

#65956 closed defect (bug) (fixed)

Mobile layout breaks on post list table during plugin update

Reported by: joedolson Owned by: joedolson
Priority: normal Milestone: 7.1.1
Component: Posts, Post Types Version: 7.1
Severity: normal Keywords: has-patch commit dev-reviewed fixed-major
Cc: Focuses: css

Description

When a plugin update is triggered, the layout shifts and the left border is doubled.

Attachments (2)

Screenshot_20260824_142053_Chrome.jpg​ (379.1 KB ) - added by joedolson 8 weeks ago.
ticket-65956-playground-mobile.png​ (67.2 KB ) - added by arkaprabhachowdhury 7 weeks ago.
WP Playground mobile test evidence for PR #13259

Download all attachments as: .zip

Change History (15)

#1 @joedolson
8 weeks ago

  • Owner set to joedolson
  • Status new → accepted

This ticket was mentioned in ​PR #13259 on ​WordPress/wordpress-develop by ​@khokansardar.


8 weeks ago
#2

  • Keywords has-patch added

On narrow viewports the plugin update row does not fill the width of the list table row, and the active plugin's left border is drawn twice.

Responsive list table rows became flex containers in [62958], but the update row kept the pre-flex :before pseudo-cell that mimicked the checkbox column. As a flex item it paints a second left border beside the row's own and leaves the update cell sized to its content. This removes the obsolete pseudo-cell and gives the cell a full-width flex basis.

Scoped to the max-width: 782px block, so desktop rendering is unchanged.

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

## Use of AI Tools

This ticket was mentioned in ​PR #13260 on ​WordPress/wordpress-develop by ​@sukhendu2002.


8 weeks ago
#3

Trac ticket:

## Use of AI Tools

@arkaprabhachowdhury
7 weeks ago

WP Playground mobile test evidence for PR #13259

#5 @arkaprabhachowdhury
7 weeks ago

Tested PR #13259 in WordPress Playground.

Environment: WordPress 7.2-alpha-20260825.043926, PHP 7.4.33, Chrome, 480x800 viewport. Installed Akismet 5.3.1 to create a reproducible update notice.

Results:

  • PASS: At 480px, the plugin update notice renders as one full-width row without the duplicated left border. The row measured 441px wide; its only cell measured 441px, flex-basis was 100%, and the cell had no left border.
  • PASS: At 1920px, the notice remains a normal table-row and spans 1716px, confirming desktop rendering is unchanged.

Screenshot: attached (Playground mobile evidence).

#6 @joedolson
6 weeks ago

  • Keywords commit added

#7 @joedolson
6 weeks ago

  • Resolution → fixed
  • Status accepted → closed

In 63452:

Administration: Fix plugin update row in narrow viewports.

Update CSS for active plugin updates to account for the changes in list table structure in r62958, which did not account for how plugin updates display notices in mobile viewports. Remove doubled left border and stabilize layout.

Props khokansardar, sukhendu2002, arkaprabhachowdhury, joedolson.
Fixes #65956.

#8 @joedolson
6 weeks ago

  • Keywords dev-feedback added
  • Resolution fixed
  • Status closed → reopened

Reopening for merge to 7.1.1.

This ticket was mentioned in ​Slack in #core by adrianduffell. ​View the logs.


6 weeks ago

#10 @adamsilverstein
6 weeks ago

Nice one @joedolson! Would you like to handle the backport here as well, or can I handle that for you?

#11 @adamsilverstein
6 weeks ago

  • Keywords dev-reviewed added; dev-feedback removed

+1 approved for 7.1.1 backport

#12 @joedolson
6 weeks ago

  • Keywords fixed-major added

#13 @joedolson
6 weeks ago

  • Resolution → fixed
  • Status reopened → closed

In 63484:

Administration: Fix plugin update row in narrow viewports.

Update CSS for active plugin updates to account for the changes in list table structure in r62958, which did not account for how plugin updates display notices in mobile viewports. Remove doubled left border and stabilize layout.

Reviewed by adam silverstein.
Merges [63452] to the 7.1 branch.

Props khokansardar, sukhendu2002, arkaprabhachowdhury, joedolson.
Fixes #65956.

Note: See TracTickets for help on using tickets.