Make WordPress Core

Opened 9 years ago

Closed 5 years ago

Last modified 9 months ago

#33830 closed defect (bug) (fixed)

Revisions: Compare revisions has layout issues on iPhone 6+

Reported by: ryan's profile ryan Owned by: adamsilverstein's profile adamsilverstein
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.3
Component: Revisions Keywords: make-flow has-patch reporter-feedback needs-refresh
Focuses: ui Cc:


From the editor, tap a revision in the Revisions meta box. The resulting compare revisions screen has some layout issues. Restore this Revision is obscured.

Attachments (10)

IMG_4715.PNG (167.6 KB) - added by ryan 9 years ago.
iPhone 6+
33830.patch (853 bytes) - added by PranaliPatel 9 years ago.
33830.2.patch (464 bytes) - added by karinedo 9 years ago.
33830.3.patch (529 bytes) - added by karinedo 9 years ago.
33830.4.patch (1.3 KB) - added by PranaliPatel 9 years ago.
This patch should fix spacing issue for mobile screen
33830.5.patch (1.3 KB) - added by adamsilverstein 8 years ago.
33830.6.patch (1.3 KB) - added by karinedo 8 years ago.
33830.diff (1.4 KB) - added by adamsilverstein 5 years ago.
33830.2.diff (1.4 KB) - added by adamsilverstein 5 years ago.
Image 2019-02-28 at 12.59.30 PM.png (79.3 KB) - added by adamsilverstein 5 years ago.

Download all attachments as: .zip

Change History (24)

9 years ago

iPhone 6+

9 years ago

#1 @PranaliPatel
9 years ago

  • Keywords has-patch added

#2 @adamsilverstein
9 years ago

Thanks for the bug report @ryan and patch @PranaliPatel!

I tested the patch with an emulator and this definitely fixes the button placement on mobile - much better!

However I am seeing some side effects: in particular, the tooltips are now off. I haven't tested the slider on an actual mobile device to see how it works - do you even see the meta popups? @PranaliPatel can you test try to address that in a new patch?

Before patch:

After patch, note tooltips overlap slider:

9 years ago

#3 @karinedo
9 years ago

This patch should fix the restore button and tooltip positions on mobile

#4 @adamsilverstein
9 years ago

  • Keywords needs-patch added; has-patch removed
  • Owner set to adamsilverstein
  • Status changed from new to assigned

@karine: Thanks for the patch!

That fixes the placement of the button, yea!

Now I see another issue: The slider gets obscured by previous/next on small screen:

I see this up to medium sized screen widths, it starts to look fine around iphone 6 landscape size (568w) in my brief testing.

The slider width is getting set in JS, and is clearly making some incorrect calculations. I can look into that, it should work fine at a smaller size.

Could we use CSS to change the next/back buttons content to icons, maybe arrows, below a certain breakpoint? Thinking these buttons could be even larger in other languages, so subbing them for icons would make sense for small screens.

9 years ago

#5 @karinedo
9 years ago

The slider width can be reduced for small screens, but when I tried keeping it between the buttons, it didn't look very good (unbalanced)... Patch puts the buttons above the slider on mobile

#6 @adamsilverstein
9 years ago

  • Keywords has-patch reporter-feedback added; needs-patch removed

Looks great @karinedo - thanks! Much, much better than before.

Can you add some more space above the slider? It looks unbalanced, seems to be more space below than above the slider. What do you think?

Here is a screenshot in chrome debugger on iphone 6 size screen:

9 years ago

This patch should fix spacing issue for mobile screen

#7 @adamsilverstein
8 years ago

@PranaliPatel - Thanks for the patch!

I finally got to testing and the slider spacing looks better, however the tooltips didn't get the same padding and now float above the slider bar:

#8 @adamsilverstein
8 years ago


  • Refresh against trunk

8 years ago

#9 @adamsilverstein
8 years ago

Thanks @karinedo! 33830.6.patch fixed the placement of the tooltip in my testing:


#11 @adamsilverstein
5 years ago

  • Keywords needs-refresh added
  • Milestone set to 5.2
  • Status changed from assigned to reopened

Reopening for consideration since the current revisions screen is still in use until we can build a block based replacement for it. This is a small css fix for mobile sized devices that is still worth including.

#12 @adamsilverstein
5 years ago


  • improve compare two mode size

#13 @adamsilverstein
5 years ago

After patch:

Last edited 5 years ago by adamsilverstein (previous) (diff)

#14 @adamsilverstein
5 years ago

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

In 44781:

Revisions: improve display responsiveness, especially on smaller screen sizes.

  • Fix an overlap issue with the "Restore this Revision" button that made it difficult to use on phone sized devices.

Props ryan, PranaliPatel, karinedo.
Fixes #33830.

#15 @plari
9 months ago

I've opened a new ticket on this topic here:

Note: See TracTickets for help on using tickets.