WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 3 days ago

#47895 new defect (bug)

Mobile row actions are rather long

Reported by: arunsathiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch dev-feedback
Focuses: css Cc:

Description

The row actions for items (like posts, pages or reusable blocks) are rather long on mobile view at the moment.

The attached image is how they look at the moment. If I remember correct, they were not spaced out so much in the past.

I see some work here on this ticket https://core.trac.wordpress.org/ticket/45024 for spacing mobile row actions, but unsure if the same changes are causing the current issue.

I also did some basic search before posting this ticket; if there's an existing report for this, happy to be pointed at it!

Attachments (4)

Screenshot 2019-08-18 at 23.09.18.png (48.0 KB) - added by arunsathiya 12 months ago.
The row actions on the reusable blocks section of a WordPress site
47895.patch (453 bytes) - added by sabernhardt 4 months ago.
correcting the selector for 2-column layout
47895.four-columns.patch (1.1 KB) - added by sabernhardt 4 months ago.
option with 4-column layout for wider mobile widths
action-links-mobile-4-column.png (12.7 KB) - added by sabernhardt 4 months ago.
4 columns at 750 pixels wide (Firefox's Responsive Mode)

Download all attachments as: .zip

Change History (9)

@arunsathiya
12 months ago

The row actions on the reusable blocks section of a WordPress site

#1 @arunsathiya
12 months ago

More info: This seems to be happen at 782px and lesser.

#2 @sabernhardt
4 months ago

  • Component changed from General to Administration
  • Focuses css added
  • Keywords has-patch needs-design-feedback added

@arunsathiya Hi and thanks for the report!

As you noticed with ticket #45024, changeset [43670] increased the link spacing on smaller screens. This intentionally creates more space between the links, mainly so it is easier to tap them with your finger.

It is supposed to arrange the links in three columns and then reduce to two at 480px and narrower, but the selector needs to be revised for the two-column adjustment. Also, the links can be quite spread out when the device/browser is between 600 and 782 pixels wide, so it's worth considering four-column layout there (or a better option).

@sabernhardt
4 months ago

correcting the selector for 2-column layout

@sabernhardt
4 months ago

option with 4-column layout for wider mobile widths

@sabernhardt
4 months ago

4 columns at 750 pixels wide (Firefox's Responsive Mode)

#3 @sabernhardt
4 months ago

Related: on #48546, @aliveic suggested using flexbox and flex-wrap instead of grid.

This ticket was mentioned in Slack in #design by estelaris. View the logs.


3 days ago

#5 @estelaris
3 days ago

  • Keywords dev-feedback added; needs-design-feedback removed

adding dev-feedback for core to check the spacing in code.

Note: See TracTickets for help on using tickets.