Make WordPress Core

Opened 2 months ago

Last modified 5 weeks ago

#63029 accepted defect (bug)

Better align restore revision buttons on mobile devices

Reported by: yogeshbhutkar's profile yogeshbhutkar Owned by: joedolson's profile joedolson
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)

bug.png (53.0 KB) - added by yogeshbhutkar 2 months ago.
Here, when the width becomes 330px, the button completely shrinks and becomes unusable.
trac.png (34.4 KB) - added by yogeshbhutkar 5 weeks ago.
reference for 30 revisions with 70% max-width

Download all attachments as: .zip

Change History (11)

@yogeshbhutkar
2 months ago

Here, when the width becomes 330px, the button completely shrinks and becomes unusable.

This ticket was mentioned in PR #8421 on WordPress/wordpress-develop by @yogeshbhutkar.


2 months ago
#1

  • Keywords has-patch added

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

## Screenshots

BeforeAfter
https://github.com/user-attachments/assets/b1c9b361-1345-42dc-8e3e-ca9ed2f94173https://github.com/user-attachments/assets/f34794b1-3764-435b-a703-e0855cb4b644
https://github.com/user-attachments/assets/504cb1d9-1c6d-4e8f-bfc5-08a0d8b592eahttps://github.com/user-attachments/assets/5d38c682-a628-4ed2-9c65-c3ee287ac623
https://github.com/user-attachments/assets/a2972bcf-2f14-4eb6-9968-22f8fcfa2d12https://github.com/user-attachments/assets/e895c670-a8dd-4f67-99a9-799b76ab3f3d

#2 @yogeshbhutkar
2 months ago

  • Keywords needs-design-feedback added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


6 weeks ago

#4 @joedolson
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 @yogeshbhutkar
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.

Last edited 5 weeks ago by yogeshbhutkar (previous) (diff)

@yogeshbhutkar
5 weeks ago

reference for 30 revisions with 70% max-width

#6 @yogeshbhutkar
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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 weeks ago

#9 @joedolson
5 weeks ago

  • Owner set to joedolson
  • Status changed from new to accepted
Note: See TracTickets for help on using tickets.