Opened 19 months ago
Last modified 2 months ago
#47895 new defect (bug)
Mobile row actions are rather long
Reported by: |
|
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)
Change History (11)
#2
@
11 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).
#3
@
10 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.
7 months ago
#5
@
7 months 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.
2 months ago
This ticket was mentioned in PR #825 on WordPress/wordpress-develop by ryelle.
2 months ago
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:
Around 660px the last item wraps
Around 510px the 3rd item wraps
Around 375px, each item it on its own line
Trac ticket: https://core.trac.wordpress.org/ticket/47895
The row actions on the reusable blocks section of a WordPress site