From fd91d0f355dc26c6d6d263667d6cd1af0fe4e3fa Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Mon, 19 Sep 2022 21:16:10 +0000 Subject: [PATCH] Editor: Fix text zoom on link popup editor. Update CSS in the classic visual editor link popup to remove sizing in pixels that caused significant text overlaps when the base font size is scaled or set to a larger custom value in the browser or operating system. Props jonny-s, sabernhardt, joedolson. Fixes #53174. git-svn-id: https://develop.svn.wordpress.org/trunk@54216 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/editor.css | 53 +++++++++------------------------- 1 file changed, 14 insertions(+), 39 deletions(-) diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index fac059c787..045cbd9d85 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1392,7 +1392,7 @@ i.mce-i-wp_code:before { } #wp-link-wrap { - height: 500px; + height: 600px; margin-top: -250px; } @@ -1407,7 +1407,6 @@ i.mce-i-wp_code:before { #link-modal-title { background: #fff; border-bottom: 1px solid #dcdcde; - height: 36px; font-size: 18px; font-weight: 600; line-height: 2; @@ -1459,10 +1458,13 @@ i.mce-i-wp_code:before { -webkit-overflow-scrolling: touch; padding: 0 16px; position: absolute; - top: 37px; + top: calc(2.15384615em + 16px); left: 0; right: 0; - bottom: 44px; + bottom: calc(2.15384615em + 19px); + display: flex; + flex-direction: column; + overflow: auto; } #wp-link ol, @@ -1497,7 +1499,7 @@ i.mce-i-wp_code:before { #wp-link #link-options label span, #wp-link #search-panel label span.search-label { display: inline-block; - width: 80px; + width: 120px; text-align: right; padding-right: 5px; max-width: 24%; @@ -1513,7 +1515,11 @@ i.mce-i-wp_code:before { #wp-link .link-search-wrapper { margin: 5px 0 9px; display: block; - overflow: hidden; +} + +#wp-link .query-results { + position: absolute; + width: calc(100% - 32px); } #wp-link .link-search-wrapper .spinner { @@ -1523,9 +1529,6 @@ i.mce-i-wp_code:before { #wp-link .link-target { padding: 3px 0 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } #wp-link .link-target label { @@ -1537,15 +1540,7 @@ i.mce-i-wp_code:before { margin: 0 0 12px; background: #fff; overflow: auto; - position: absolute; - left: 16px; - right: 16px; - bottom: 0; - top: 166px; -} - -.has-text-field #wp-link .query-results { - top: 210px; + max-height: 290px; } #wp-link li { @@ -1662,24 +1657,12 @@ i.mce-i-wp_code:before { } @media screen and (max-width: 782px) { - #wp-link-wrap { - margin-top: -140px; - } - - #wp-link-wrap .query-results { - top: 195px; - } - - #wp-link-wrap.has-text-field .query-results { - top: 235px; - } - #link-selector { padding: 0 16px 60px; } #wp-link-wrap #link-selector { - bottom: 52px; + bottom: calc(2.71428571em + 23px); } #wp-link-cancel { @@ -1717,10 +1700,6 @@ i.mce-i-wp_code:before { #link-selector { overflow: auto; } - - #search-panel .query-results { - position: static; - } } @media screen and (max-height: 290px) { @@ -1736,10 +1715,6 @@ i.mce-i-wp_code:before { height: calc(100% - 92px); padding-bottom: 2px; } - - #search-panel .query-results { - position: static; - } } div.wp-link-preview {