Changeset 54216

Timestamp:

09/19/2022 09:16:10 PM (2 years ago)

Author:

joedolson

Message:

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.

File:

• trunk/src/wp-includes/css/editor.css (modified) (11 diffs)

trunk/src/wp-includes/css/editor.css

@@ -1393 +1393 @@
 
 #wp-link-wrap {
-    height: 500px;
+    height: 600px;
     margin-top: -250px;
 }
@@ -1408 +1408 @@
     background: #fff;
     border-bottom: 1px solid #dcdcde;
-    height: 36px;
     font-size: 18px;
     font-weight: 600;
@@ -1460 +1459 @@
     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;
 }
 
@@ -1498 +1500 @@
 #wp-link #search-panel label span.search-label {
     display: inline-block;
-    width: 80px;
+    width: 120px;
     text-align: right;
     padding-right: 5px;
@@ -1514 +1516 @@
     margin: 5px 0 9px;
     display: block;
-    overflow: hidden;
+}
+
+#wp-link .query-results {
+    position: absolute;
+    width: calc(100% - 32px);
 }
 
@@ -1524 +1530 @@
 #wp-link .link-target {
     padding: 3px 0 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
@@ -1538 +1541 @@
     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;
 }
 
@@ -1663 +1658 @@
 
 @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;
@@ -1680 +1663 @@
 
     #wp-link-wrap #link-selector {
-        bottom: 52px;
+        bottom: calc(2.71428571em + 23px);
     }
 
@@ -1718 +1701 @@
         overflow: auto;
     }
-
-    #search-panel .query-results {
-        position: static;
-    }
 }
 
@@ -1736 +1715 @@
         height: calc(100% - 92px);
         padding-bottom: 2px;
-    }
-
-    #search-panel .query-results {
-        position: static;
     }
 }