Media edit screen on mobile has visual issues

[karmatosed]

This screen unfortunately on an iPhone 7 Plus is pretty unusable.

I would at the least suggest we don't have 2 panes and move the right below the left. Then we can iterate.

[hedgefield]

I've taken a stab at improving this layout. Obviously the panels shouldn't be arranged horizontally, so I moved the settings below the image, and I fixed some layout inconsistencies including removing the redundant Back button. The X at the top can probably also go away.

I also added a second version which borrows some more smartphone-focused design elements from the app, and moves the buttons into the top bar - that's not so much an improvement for the usability, but it frees up a lot of dead space that the bar at the bottom was taking up. It also makes more sense to have the mirror/rotate controls below the image, for desktop view as well.

Aside from that, the image should be responsive, probably even on desktop, otherwise there is a lot of wasted space there.

[Luwkaslima]

Checking the issue I noticed this only happens when editing the image from Posts or Pages. However, if you access through MEDIA and click on EDIT, the screen presented has a different layout, which is more towards the first option presented by @hedgefield.

Post or Page:

Media Gallery:

Anyways, my comment here is with the objective to highlight the importance of working on both screens to make them look the same, so we guarantee consistency on the usability point of view. Does it make sense? Should we consider both in same ticket?

[MatheusGimenez]

Hello everyone,

I've worked on a patch for this ticket as aligned in one of the #core-media meetings, but I have a question to be able to conclude it. I've worked on a solution for 780px screens using media query. Can someone help me understand which screens I should work with?

I also used flexbox rules to change the order of each element. Is this a good practice in the core?