Make WordPress Core

Opened 5 years ago

Closed 3 years ago

Last modified 22 months ago

#47895 closed defect (bug) (fixed)

Mobile row actions are rather long

Reported by: arunsathiya's profile arunsathiya Owned by: sabernhardt's profile sabernhardt
Milestone: 5.8 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
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 (8)

Screenshot 2019-08-18 at 23.09.18.png (48.0 KB) - added by arunsathiya 5 years ago.
The row actions on the reusable blocks section of a WordPress site
47895.patch (453 bytes) - added by sabernhardt 4 years ago.
correcting the selector for 2-column layout
47895.four-columns.patch (1.1 KB) - added by sabernhardt 4 years ago.
option with 4-column layout for wider mobile widths
action-links-mobile-4-column.png (12.7 KB) - added by sabernhardt 4 years ago.
4 columns at 750 pixels wide (Firefox's Responsive Mode)
mobile-row-actions--flex-preview.gif (938.1 KB) - added by danfarrow 3 years ago.
current-user-patch-600.png (13.7 KB) - added by sabernhardt 3 years ago.
Users screen: the current user's View link can be far from the Edit link
comment-patch-414.png (14.2 KB) - added by sabernhardt 3 years ago.
two links on second row can also be far apart
Screen Shot 2021-05-26 at 10.34.35 AM.png (61.0 KB) - added by ryelle 3 years ago.

Download all attachments as: .zip

Change History (26)

@arunsathiya
5 years ago

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

#1 @arunsathiya
5 years ago

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

#2 @sabernhardt
4 years 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 years ago

correcting the selector for 2-column layout

@sabernhardt
4 years ago

option with 4-column layout for wider mobile widths

@sabernhardt
4 years ago

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

#3 @sabernhardt
4 years 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.


4 years ago

#5 @estelaris
4 years ago

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

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

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


3 years ago

This ticket was mentioned in PR #825 on WordPress/wordpress-develop by ryelle.


3 years ago
#7

This updates the row actions CSS to use flexbox with a full-width layout, placing the extra space between each action item. It also updates the min-width of each item to 10em, just to keep that larger touch-target. That's an arbitrary amount, we can tweak that if another value looks better.

At 782px, it switches to the full-width flexbox layout:

https://i0.wp.com/user-images.githubusercontent.com/541093/102548507-c46ade00-4088-11eb-844a-6ba44a7c1918.png

Around 660px the last item wraps

https://i0.wp.com/user-images.githubusercontent.com/541093/102548506-c46ade00-4088-11eb-9322-790b8593cbeb.png

Around 510px the 3rd item wraps

https://i0.wp.com/user-images.githubusercontent.com/541093/102548505-c46ade00-4088-11eb-8e83-305910800f56.png

Around 375px, each item it on its own line

https://i0.wp.com/user-images.githubusercontent.com/541093/102548503-c3d24780-4088-11eb-96cd-2c314df8df05.png

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

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


3 years ago

#9 follow-up: @danfarrow
3 years ago

It’s looking good to me!

Animated gif showing Firefox dev tools flexbox overlay to reveal the enlarged touch targets:


#10 in reply to: ↑ 9 @danfarrow
3 years ago

(just to clarify, my comment is in relation to @ryelle's patch)

Replying to danfarrow:

It’s looking good to me!

Animated gif showing Firefox dev tools flexbox overlay to reveal the enlarged touch targets:


@sabernhardt
3 years ago

Users screen: the current user's View link can be far from the Edit link

@sabernhardt
3 years ago

two links on second row can also be far apart

#11 @sabernhardt
3 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to 5.8
  • Owner set to sabernhardt
  • Status changed from new to accepted

Note: the PR was changed since it was attached to the ticket, so there is no min-width and the screenshots within that description no longer apply.

Overall, PR 825 improves the mobile layout. In some situations, though, justify-content: space-between is not ideal. I think I prefer removing that rule (so it's the default flex-start).

I'd like a change here in 5.8. If we're comfortable with the flexbox now, that would close both this and #48546 together. Otherwise, I could refresh the simple selector correction 47895.patch on this ticket and the flexbox discussion could move to the other ticket.

#12 @ryelle
3 years ago

Ah, the space-between was to spread out the actions, to prevent accidental touch-taps. But on those items with 2 actions (like the current user), it ends up being less usable. There's probably enough padding on each item to be sufficient touch targets. I've updated the PR and added a screenshot there.

Version 0, edited 3 years ago by ryelle (next)

ryelle commented on PR #825:


3 years ago
#13

New iteration, with space-between removed:

<img width="662" alt="Screen Shot 2021-05-26 at 10 34 35 AM" src="https://user-images.githubusercontent.com/541093/119679100-153beb00-be0e-11eb-9b3c-f6ec609447e9.png">

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


3 years ago

#15 @notlaura
3 years ago

I tested this change and can confirm the row actions are no longer justified space-between, and I am seeing the same as @ryelle's most recent screenshot.

#16 @ryelle
3 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 51073:

List Tables: Update spacing in action items on small screens.

Switch the display to flex. The action items use their intrinsic space, rather than a fixed grid, which prevents too much space between items on larger mobile screens.

Props arunsathiya, sabernhardt, danfarrow, notlaura, aliveic, y_kolev
Fixes #48546, #47895.

ryelle commented on PR #825:


3 years ago
#17

Committed in r51073.

#18 @sabernhardt
22 months ago

#46942 was marked as a duplicate.

Note: See TracTickets for help on using tickets.