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

[dannymasao]

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.

[dannymasao]

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

[dannymasao]

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

[dannymasao]

screen capture of relevant css rules

[xkon]

Removes top margin from link modal

[xkon]

Preview of margin removal on small screens

[xkon]

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.

[dannymasao]

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.