Content overruns on mobile devices

[ubernaut]

in reference to the following make post on UX flows for multisite admin screens:

​https://make.wordpress.org/flow/tag/multisite/

a number of content overruns have been identified listing them here:
a number of urls overrun width in various install/update screens on a number of devices (not sure if we care about that or not).

nexus 6 ​https://make.wordpress.org/flow/2015/06/09/network-admin-nexus-6/

description area of the plugin screens

iphone 5 ​https://make.wordpress.org/flow/2015/06/02/multisite-video-flows-iphone-5s/

search fields on network admin dashboard both overrun width, a number of fields overrun width in the add user screen, plugin screen and theme screen both overrun in the description areas, the last video shows the users screen which has a lot of problems overlaps collisions etc.

[jeremyfelt]

Moving this to 4.3 as part of the effort to clean up Admin UI. This should be a smaller change affecting the width of an input on mobile devices.

[sunnyratilal]

On WordPress 4.3-beta2-33140-src the URLs on the update screens don't seem to overrun.

[jeremyfelt]

These screens need help on iPhone 6:

• Add existing user in network admin.
• Add new user in site admin.
• Something on the network admin themes page by just a few pixels.
• Something on the site admin themes page by just a few pixels.

[jeremyfelt]

Form inputs when adding a site user on iPhone 6

[jeremyfelt]

Form inputs when adding a network user on iPhone 6

[jeremyfelt]

In 33162:

Improve styling of #adduser text inputs on mobile devices.

In [26134], #createuser inputs were made responsive, but #adduser was a straggler. This assigns the proper mobile style to the add user inputs and moves the initial declaration alongside create user for future maintenance ease.

See #32846.

[jeremyfelt]

Add site user on iPhone 6 after [33162]

[jeremyfelt]

Add network user on iPhone 6 after [33162]

[jeremyfelt]

Full width H1 for Themes screen on network, site, and single site causing overrun.

[jeremyfelt]

It's hard to track down the reasoning for .theme-php .wrap h1 { width: 100%; } in mobile views now as it was originally introduced in ​txh-38:844556 before the final merges of the new theme experience to core in 3.8. It seems like there may have been a time when the search input was handled slightly different.

In the network admin, there is no search input next to the title, only Add New. This is all wrapped in the same h1, which is floated left and does not have any conflicts if the width is removed.

In a site admin on the network, there is no Add New button, only an indicator of number of themes. This is also wrapped in the same h1 and has no trouble if width is removed.

In a single site admin, both Add New and a search input are provided, though all are part of the same h1 and removing width causes no trouble.

It seems like we could also remove float: left;, but the smaller change the better. :)

[jeremyfelt]

In 33165:

Improve styling of .themes-php header on mobile devices.

The Themes page title does not need to be forced to 100% width on smaller devices. This fixes width issues for network admin, site admin, and single site admin theme pages.

See #32846.

[jeremyfelt]

Network admin themes screen after [33165]

[jeremyfelt]

Multisite site admin themes screen after [33165] on mobile.

[jeremyfelt]

Single site admin themes screen after [33165] on mobile.

[jeremyfelt]

iPad portrait, network setup screen before

[jeremyfelt]

iPad landscape, network setup screen, before

[jeremyfelt]

The text areas in the network setup screen (wp-admin/network/setup.php) are set to 100 columns for all views and have no width restriction. Once things get down to about 1024px, the content overruns the screen. Normal use of the screen is likely very uncommon on mobile, but we can fix it by applying a max width of 100% to the textarea inputs on this screen.

I've included iPad screenshots, but the same issue applies to all smaller screens as well.

[jeremyfelt]

In 33171:

Restrict textarea fields in network setup to a max width of 100%.

This avoids the content overrunning the screen on mobile devices.

See #32846.

[jeremyfelt]

iPad portrait, network setup screen after [33171]

[jeremyfelt]

iPad landscape, network setup screen, after [33171]

[jeremyfelt]

Network dashboard, Right Now widget, iPhone5 before

[jeremyfelt]

The search users and search sites input fields bleed outside of the Right Now network dashboard widget on the iPhone 5. Larger devices are fine.

[jeremyfelt]

In 33172:

Restrict search inputs in network dashboard's Right Now to max width of 100%.

This prevents the fields from bleeding outside of the widget area on smaller mobile devices.

See #32846.

[jeremyfelt]

iPhone 5, network dashboard right now widget, after [33172]

[jeremyfelt]

Going to close this as fixed for 4.3. Beyond the ​flows posted by @ubernaut, I've been through all of the network admin screens with an iPhone 6 and iPhone 5 and am not seeing anything else at the moment.

Recap:

• [33162] improved add user text inputs
• [33165] improved themes.php header
• [33171] improved textarea in network setup
• [33172] improved search inputs in Right Now dashboard

[ubernaut]

awesome stuff!