WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#32846 closed defect (bug) (fixed)

Content overruns on mobile devices

Reported by: ubernaut Owned by: jeremyfelt
Milestone: 4.3 Priority: normal
Severity: normal Version: 3.0
Component: Networks and Sites Keywords:
Focuses: ui, administration, multisite Cc:

Description (last modified by jeremyfelt)

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.

Attachments (14)

32846-before-add-site-user.png (101.4 KB) - added by jeremyfelt 3 years ago.
Form inputs when adding a site user on iPhone 6
32846-before-add-network-user.png (67.2 KB) - added by jeremyfelt 3 years ago.
Form inputs when adding a network user on iPhone 6
32846-after-add-site-user.png (109.7 KB) - added by jeremyfelt 3 years ago.
Add site user on iPhone 6 after [33162]
32846-after-add-network-user.png (75.2 KB) - added by jeremyfelt 3 years ago.
Add network user on iPhone 6 after [33162]
before-all-theme-screens-mobile.png (18.6 KB) - added by jeremyfelt 3 years ago.
Full width H1 for Themes screen on network, site, and single site causing overrun.
after-33165-network-themes-mobile.png (21.2 KB) - added by jeremyfelt 3 years ago.
Network admin themes screen after [33165]
after-33165-site-themes-mobile.png (70.8 KB) - added by jeremyfelt 3 years ago.
Multisite site admin themes screen after [33165] on mobile.
after-33165-single-site-themes-mobile.png (88.6 KB) - added by jeremyfelt 3 years ago.
Single site admin themes screen after [33165] on mobile.
network-setup-ipad-portrait.png (167.2 KB) - added by jeremyfelt 3 years ago.
iPad portrait, network setup screen before
network-setup-ipad-landscape.png (182.7 KB) - added by jeremyfelt 3 years ago.
iPad landscape, network setup screen, before
after-33171-network-setup-ipad-portrait.png (168.8 KB) - added by jeremyfelt 3 years ago.
iPad portrait, network setup screen after [33171]
after-33171-network-setup-ipad-landscape.png (183.7 KB) - added by jeremyfelt 3 years ago.
iPad landscape, network setup screen, after [33171]
iphone5-right-now-dashboard-before.png (51.9 KB) - added by jeremyfelt 3 years ago.
Network dashboard, Right Now widget, iPhone5 before
iphone5-right-now-dashboard-after.png (52.7 KB) - added by jeremyfelt 3 years ago.
iPhone 5, network dashboard right now widget, after [33172]

Download all attachments as: .zip

Change History (31)

This ticket was mentioned in Slack in #core-multisite by ubernaut. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-multisite by ubernaut. View the logs.


3 years ago

#3 @jeremyfelt
3 years ago

  • Focuses ui administration added
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to 4.3

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.

#4 @jeremyfelt
3 years ago

  • Description modified (diff)

This ticket was mentioned in Slack in #core by jeremyfelt. View the logs.


3 years ago

#6 @sunnyratilal
3 years ago

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

https://cldup.com/Q4b0WVD-yZ.png

Last edited 3 years ago by sunnyratilal (previous) (diff)

#7 @jeremyfelt
3 years ago

  • Keywords good-first-bug removed
  • Owner set to jeremyfelt
  • Status changed from new to assigned
  • Version changed from 4.2.2 to 3.0

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
3 years ago

Form inputs when adding a site user on iPhone 6

@jeremyfelt
3 years ago

Form inputs when adding a network user on iPhone 6

#8 @jeremyfelt
3 years ago

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
3 years ago

Add site user on iPhone 6 after [33162]

@jeremyfelt
3 years ago

Add network user on iPhone 6 after [33162]

@jeremyfelt
3 years ago

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

#9 @jeremyfelt
3 years ago

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. :)

#10 @jeremyfelt
3 years ago

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
3 years ago

Network admin themes screen after [33165]

@jeremyfelt
3 years ago

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

@jeremyfelt
3 years ago

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

@jeremyfelt
3 years ago

iPad portrait, network setup screen before

@jeremyfelt
3 years ago

iPad landscape, network setup screen, before

#11 @jeremyfelt
3 years ago

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.

#12 @jeremyfelt
3 years ago

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
3 years ago

iPad portrait, network setup screen after [33171]

@jeremyfelt
3 years ago

iPad landscape, network setup screen, after [33171]

@jeremyfelt
3 years ago

Network dashboard, Right Now widget, iPhone5 before

#13 @jeremyfelt
3 years ago

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.

#14 @jeremyfelt
3 years ago

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
3 years ago

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

#15 @jeremyfelt
3 years ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from assigned to closed

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

#16 @ubernaut
3 years ago

awesome stuff!

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.