WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#31908 closed defect (bug) (fixed)

Insert into post button runs off the side of the screen on small devices

Reported by: ryan Owned by: helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.1
Component: Media Keywords: has-patch
Focuses: ui Cc:
PR Number:

Description

The insert into post button in the media modal runs off the side of the screen on iPhone 5 and Nexus 5.

4.2-beta4-31998-src

Attachments (4)

IMG_3314.PNG (211.2 KB) - added by ryan 5 years ago.
Screenshot_2015-04-06-10-56-51.png (265.4 KB) - added by ryan 5 years ago.
31908.patch (532 bytes) - added by iseulde 5 years ago.
31908.2.patch (709 bytes) - added by DrewAPicture 5 years ago.

Download all attachments as: .zip

Change History (19)

@ryan
5 years ago

#1 @ryan
5 years ago

  • Summary changed from Insert into post button runs off the side off the screen on small devices to Insert into post button runs off the side of the screen on small devices

#2 @iseulde
5 years ago

  • Version changed from trunk to 4.1

Introduced in [30813], see #30658.

@iseulde
5 years ago

#3 @iseulde
5 years ago

  • Keywords has-patch added

#4 @DrewAPicture
5 years ago

  • Owner set to helen
  • Status changed from new to reviewing

#5 @voldemortensen
5 years ago

My question here: Why is .search-form being added to every view? That seems to be what the max-width was targeting in the first blame (at least what I gather from the commit message in r30813). I think a proper fix with focus on getting .search-form added only where it needs to be and moving max-width to a more targeted selector.

#7 @DrewAPicture
5 years ago

  • Keywords commit added

Also looks good in Android before and after. Moving for commit consideration.

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


5 years ago

#9 @helen
5 years ago

  • Keywords commit removed

Too broad of a change, not good on wider screens with many attachments selected. Will look at this more holistically after #30725, which is making changes in the same vicinity so I'd prefer to avoid a conflict there since it's a more complicated patch.

#10 @DrewAPicture
5 years ago

  • Keywords punt added

We need to make a decision here, punt or fix. I'm fine with punting as this isn't new to 4.2.

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


5 years ago

#12 @azaozz
5 years ago

31908.2.patch looks good. The problem comes from both "area containers" having the same class name: media-toolbar, and the same "sub-containers" class names. We need to limit them (max-width) for the "toolbar" above the attachments listing area. There's no need to limit them when used under the attachments listing, where the "Insert into post" button is.

The patch keeps the max-length for the sub-containers on the Media screen too, as there they are also children of attachments-browser.

Last edited 5 years ago by azaozz (previous) (diff)

#13 @DrewAPicture
5 years ago

  • Keywords punt removed

#14 @azaozz
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 32121:

Fix the media modal Insert into post button on narrow screens by limiting the width of .media-toolbar-primary and .media-toolbar-secondary only inside .attachments-browser (the top toolbar).
Props iseulde, DrewAPicture. Fixes #31908.

#15 @ryan
5 years ago

Looks good on Nexus 5, iPhone 5, and iPhone 6+.

Note: See TracTickets for help on using tickets.