WordPress.org

Make WordPress Core

Opened 20 months ago

Last modified 20 months ago

#43267 new defect (bug)

Admin editor "Insert link" modal on mobile seems to have incorrect styling

Reported by: dannymasao Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.8.3
Component: Editor Keywords: has-patch
Focuses: Cc:
PR Number:

Description

The modal box that pops up when you hit the link button of the editor in text mode is positioned strangely, in a way that on some devices you can't even hit the Add Link button, making it impossible to add a link.

I looked at the css and noticed that the modal is in a fixed position in the center of the screen when the screen is big enough (the modal is 500px by 500px), and when the screen is smaller the modal is responsive.

The issue seems to be that while the class #wp-link-wrap has a margin-top of -250px to center the modal in the middle, there is a media query ( max-width: 782px ) that specifies a margin-top of -140px. There is a separate media query (max-width: 520px) that's apparently trying to make the modal responsive but because the margin-top: -140px is applied, the modal box is way lower than it should be on mobile. I noticed there is a media query for the height also but that's targeting max-width 520px as well, so any mobile device that has a screen height larger than 520px would have the modal positioned awkwardly.

I added a custom css in my admin screen that forces a margin-top of -250px as a quick fix, but I was wondering if this is a styling bug that's going to get fixed.

I tested on several version of WordPress that I had access to, and I reproduced this in the latest, as well as versions 4.9.2, and 4.8.3.

I checked an older site with version 3.9.2 and on this version the modal has a height of 280px that expands to 500px when I click on "Or link to existing content". I'm guessing the -140px margin was a declaration that was written for that version of the modal box that didn't get deleted when the modal box became 500px on default.

Sorry if this is duplicate, I tried searching for a ticket that was similar but could not find anything.

Attachments (5)

version4-8-3.jpg (68.8 KB) - added by dannymasao 20 months ago.
version 4.8.3 on iPhone 8 (this is a screen capture of Chrome dev tools, but also reproduced on actual iPhone)
version4-9-4.jpg (63.7 KB) - added by dannymasao 20 months ago.
version 4.9.4 (Japanese) on iPhone 8 (this is a screen capture of Chrome dev tools, but also reproduced on actual iPhone)
devtool.jpg (90.5 KB) - added by dannymasao 20 months ago.
screen capture of relevant css rules
43267.diff (382 bytes) - added by xkon 20 months ago.
Removes top margin from link modal
43267.diff.png (19.1 KB) - added by xkon 20 months ago.
Preview of margin removal on small screens

Download all attachments as: .zip

Change History (7)

@dannymasao
20 months ago

version 4.8.3 on iPhone 8 (this is a screen capture of Chrome dev tools, but also reproduced on actual iPhone)

@dannymasao
20 months ago

version 4.9.4 (Japanese) on iPhone 8 (this is a screen capture of Chrome dev tools, but also reproduced on actual iPhone)

@dannymasao
20 months ago

screen capture of relevant css rules

@xkon
20 months ago

Removes top margin from link modal

@xkon
20 months ago

Preview of margin removal on small screens

#1 @xkon
20 months ago

  • Keywords has-patch added

43267.diff removes the extra margin-top: -140px; so the modal falls back to the top: 10px; that makes more sense visually in small screens.

#2 @dannymasao
20 months ago

Thanks @xkon for the patch!
I'm not exactly familiar with how WordPress development works just yet, but I hope this patch gets added into the core files soon.

Note: See TracTickets for help on using tickets.