Revisions: Compare revisions has layout issues on iPhone 6+

[ryan]

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.

[ryan]

iPhone 6+

[adamsilverstein]

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:

[karinedo]

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

[adamsilverstein]

@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.

[karinedo]

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

[adamsilverstein]

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:

[PranaliPatel]

This patch should fix spacing issue for mobile screen

[adamsilverstein]

@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:

[adamsilverstein]

33830.5.patch​

• Refresh against trunk

[adamsilverstein]

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

Browserstack/Iphone6s:

[adamsilverstein]

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.

[adamsilverstein]

33830.2.diff​:

• improve compare two mode size

[adamsilverstein]

After patch:

[adamsilverstein]

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.

[plari]

I've opened a new ticket on this topic here: https://core.trac.wordpress.org/ticket/58844