[wp-trac] [WordPress Trac] #43267: Admin editor "Insert link" modal on mobile seems to have incorrect styling

[WordPress Trac]

#43267: Admin editor "Insert link" modal on mobile seems to have incorrect styling
--------------------------+-----------------------------
 Reporter:  dannymasao    |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  4.8.3
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/43267>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform