Opened 2 months ago
Last modified 5 weeks ago
#63029 accepted defect (bug)
Better align restore revision buttons on mobile devices
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.9 | Priority: | normal |
Severity: | normal | Version: | 3.8 |
Component: | Revisions | Keywords: | has-patch |
Focuses: | ui, accessibility, css | Cc: |
Description
On mobile devices, the restore revision buttons in the revision comparison view appear too cramped, and they appear misaligned in normal view.
Additionally, due to the fixed height of their parent containers, these buttons shrink significantly when the available space is 330px
or less, such as when comparing revisions of different versions. If the screen width decreases any further than 330px
, the buttons can become unusable or disappear entirely.
Attachments (2)
Change History (11)
This ticket was mentioned in PR #8421 on WordPress/wordpress-develop by @yogeshbhutkar.
2 months ago
#1
- Keywords has-patch added
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
6 weeks ago
#4
@
6 weeks ago
- Milestone changed from Awaiting Review to 6.9
- Version changed from trunk to 3.8
The design change is good! I'm wondering if we could also increase the width of the slider in this mobile view? I'm not sure it's helpful to have the significant side padding.
I'd only wrap that into this patch if it's fairly easy to accomplish; if there are problems, that could be a separate ticket.
It would be very difficult to figure out when this was introduced; I'm going to set it as 3.8, the last major admin redesign.
#5
@
5 weeks ago
- Keywords needs-design-feedback removed
Thanks for the feedback, @joedolson! The slider expands with multiple revisions, but its max width is still capped at 70%:
https://github.com/WordPress/wordpress-develop/blob/3861c9092e38b43769818810b4ca36d380acbf47/src/wp-admin/css/revisions.css#L167-L168
With 30 revisions, the 70% max-width feels reasonable. Also, increasing it further could cause the tooltip to overflow.
The PR is now ready to be reviewed.
#6
@
5 weeks ago
I believe the slider behavior could be improved further. Notably, it doesn't support sliding on mobile devices, instead, it acts as a button where ticks must be tapped to move it. I confirmed this on a real device as well.
That said, it's best to address this separately in a dedicated ticket.
@yogeshbhutkar commented on PR #8421:
5 weeks ago
#7
Here's a screencast after the latest changes:
https://github.com/user-attachments/assets/f6ee92e5-2a1f-4db4-af21-14e56d26af92
P.S. This has been tested locally.
Here, when the width becomes 330px, the button completely shrinks and becomes unusable.