WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

#32657 closed defect (bug) (fixed)

Media List (wp-list-table): attachment thumbnails overlap each other

Reported by: tyxla Owned by: helen
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

When viewing the Media Library in list view, the thumbnails overlap the next entry.

Attaching a preview of the issue.

Attachments (4)

32657.jpg (140.5 KB) - added by tyxla 4 months ago.
Attaching a preview of the issue
32657.patch (459 bytes) - added by tyxla 4 months ago.
Adding min height to .media-info to resolve the issue with overlapping thumbnails in media list view.
32657-after.jpg (144.4 KB) - added by tyxla 4 months ago.
Here is a preview of the fixed issue.
32657.2.patch (1.4 KB) - added by tyxla 4 months ago.
Updating @helen's version to fix a couple of minor issues and update the CSS.

Download all attachments as: .zip

Change History (14)

@tyxla4 months ago

Attaching a preview of the issue

comment:1 @tyxla4 months ago

Since the thumbnail container is absolute, I suggest that we fix this by adding a min height of the .media-info. This will work fine for both cases - image thumbnails (which are 60px in height), and icon thumbnails (which are 64px in height).

Patch coming in a minute.

@tyxla4 months ago

Adding min height to .media-info to resolve the issue with overlapping thumbnails in media list view.

@tyxla4 months ago

Here is a preview of the fixed issue.

comment:2 @tyxla4 months ago

  • Keywords has-patch added

comment:3 @obenland4 months ago

  • Milestone changed from Awaiting Review to 4.3

Possibly a result from recent Admin UI work.

/cc @helen @stephdau

comment:5 @helen4 months ago

Looks like row actions are missing :) Going to dig into that first, though we should probably do this anyway just in case.

comment:6 @helen4 months ago

In 32798:

Media list table: Restore row actions.

see #29881, #32657.

comment:7 @helen4 months ago

Adding the min-height would make each row taller for not much reason given the default state, though I do wonder if we should protect against this. Thoughts?

@tyxla4 months ago

Updating @helen's version to fix a couple of minor issues and update the CSS.

comment:8 @tyxla4 months ago

Oh well. How could I have missed that the row actions are missing. :) Thanks for noticing that.

But with the latest commit [32798] I have some PHP notices appearing there. Turns out that they are because of bad parameter naming for handle_row_actions(). I've attached a patch that addresses these, and updated the method docs as well.

Also, I've updated the CSS for consistency with that solution. With this approach, min-height will not be necessary anymore.

Last edited 4 months ago by tyxla (previous) (diff)

comment:9 @slackbot4 months ago

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

comment:10 @helen4 months ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 32805:

Media list table: Avoid PHP notices by using the proper variables.

Also visually tightens up the row actions.

props tyxla.
fixes #32657. see #29881.

Note: See TracTickets for help on using tickets.