Wordpress-ios: Layout: do an audit of the app to make sure we are consistent with the support of safe area insets

[designsimply]

While beta testing version 14.5 of the app, I noticed quite a few places where various parts of the layout don't extend all the way to the right of the screen when in landscape mode. Here is an example from the Themes screen:

^{Tested with WPiOS 14.5.0.1 TestFlight beta on iPhone 11 iOS 13.4.}

In comparison, it looks much nicer on a smaller device such as an iPhone 6S probably because it doesn't trigger a splitscreen view at that size:

^{Tested with WPiOS 14.5.0.1 TestFlight beta on iPhone 6S iOS 13.3.1.}

I took several more screenshots for reference:

^{Tested with WPiOS 14.5.0.1 TestFlight beta on iPhone 11 iOS 13.4.}

^{(internal reference: p4a5px-2wF-p2#comment-10730, where we specifically discussed display problems in the Reader but also decided to prioritize making sure user-created content is properly displayed in the apps)}

[bjtitus]

it looks much nicer on a smaller device such as an iPhone 6S probably because it doesn't trigger a splitscreen view at that size

Just wanted to point out that this is an issue with the notch on these devices.

Many of these should be cleaned up, but we should expect to have a bit of a gap in many cases where controls would be obscured. As an example, this screenshot of Settings matches pretty closely with what the native Notes applications does with cells.

[frosty]

Thanks for the report, @designsimply! We should do an audit of the app to double check we're being consistent with the support of safe area insets. For now, I'm going to adjust this issue to low priority, due to low severity (visual issue) x medium impact (only notched devices affected).

[mindgraffiti]

I'm currently researching this issue. The landscape layouts aren't consistent between similar viewports. For example, the iPhone 11 (iOS 13.4) displays a splitscreen view, but the iPhone 11 Pro (iOS 13.4) shares the same viewport size and does not display splitscreen. Please note that I say viewport and not screen size, because the iPhone 11 Pro has a higher pixel density ~but the same physical size as an iPhone 11~. Turns out the iPhone 11 Pro is slightly physically smaller than the 11. The iPhone 11 is 6.1" and the iPhone 11 Pro is 5.8" 🙃

iPhone 11, iOS 13.4.1

iPhone 11 Pro, iOS 13.4.1

[mindgraffiti]

For reference, check out the Human Interface Guidelines > Visual Design > Adaptivity and Layout page, Device Size Classes heading.

In looking at the Landscape Orientation column of the HIG page, any device that is listed as Regular width should display the two-column layout. Any device that is listed as Compact width should display the single-column layout.

It appears that any device with a physical size of 6 inches (~15 mm) or greater gets the two-column layout in Landscape orientation.

They include:

• all iPads
• any iPhone "Plus" models
• any iPhone "Max" models
• the iPhone XR and iPhone 11

All other devices are expected to keep compact mode (single-column layouts):

• iPhone SE
• iPhone 6, 7, 8, X, Xs, 11 Pro

[frosty]

Just an addition to your device lists above, the XR _and 11_ have a regular width by default.

[mindgraffiti]

Thanks @frosty! Edited ✔️

[designsimply]

Moved this out of the Prioritized iOS list due to low priority and I updated the title to reflect the comment saying we should "do an audit of the app to double check we're being consistent with the support of safe area insets." 👍

[designsimply]

I'd like to suggest we cover this case as part of the audit proposed in this issue:

• [ ] https://github.com/wordpress-mobile/WordPress-iOS/issues/13846 ‘Reply to Post’ arrow icon clips under the notch in landscape on certain iOS devices.