Ticket #38651: 38651.6.diff

src/wp-content/themes/twentyfourteen/style.css

@@ -3098 +3098 @@
         width: device-width;
 }
 
+@media screen and (max-width:800px) {
+        .site-header .site-title {
+                padding-left: 8px;
+        }
+
+        .site-header .customize-partial-edit-shortcut button {
+                top: 10px;
+        }
+}
+
+
 @media screen and (max-width: 400px) {
         .list-view .site-content .post-thumbnail {
                 background: none;
@@ -3172 +3183 @@
         }
 }
 
+@media screen and (max-width:320px) {
+        .site-header .customize-partial-edit-shortcut button {
+                left: -32px;
+        }
+
+        .site-header .site-title {
+                padding-left: 28px;
+        }
+}
+
 @media screen and (min-width: 401px) {
         a.post-thumbnail:hover img {
                 opacity: 0.85;

src/wp-content/themes/twentyseventeen/style.css

@@ -3066 +3066 @@
 ## Media Queries
 --------------------------------------------------------------*/
 
+@media screen and (min-width: 20em) {
+        .site-header .site-title {
+                padding-left: 0;
+        }
+}
+
 @media screen and (min-width: 30em) {
 
         /* Typography */

src/wp-includes/css/customize-preview.css

@@ -35 +35 @@
         border: 1px solid #0085ba;
 }
 
-/* Styles for the actual shortcut */
+/**
+ * Styles for the actual shortcut
+ *
+ * Note that some properties are overly verbose to prevent theme interference.
+ */
 .widget .customize-partial-edit-shortcut button,
 .customize-partial-edit-shortcut button {
         position: absolute;
-        left: -36px;
+        left: -30px;
+        top: 2px;
         color: #fff;
         width: 30px;
         height: 30px;
@@ -101 +106 @@
         visibility: hidden;
 }
 
-.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
-        left: 0;
-}
-
 @-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
         from, 20%, 40%, 60%, 80%, to {
                 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -242 +243 @@
 }
 
 @media screen and (max-width:800px) {
+        .widget .customize-partial-edit-shortcut button,
+        .customize-partial-edit-shortcut button {
+                left: -32px;
+        }
+}
+
+@media screen and (max-width:320px) {
+        .site-title { padding-left: 10px; }
+
+        .widget-area .widget {
+                padding-left: 10px;
+        }
+
+        .widget .customize-partial-edit-shortcut button,
         .customize-partial-edit-shortcut button {
-                left: -18px; /* Assume there will be less of a margin available on smaller screens */
+                left: -30px;
         }
 }

src/wp-includes/js/customize-selective-refresh.js

@@ -118 +118 @@
                                 return;
                         }
                         $shortcut = partial.createEditShortcut();
-                        partial.positionEditShortcut( placement, $shortcut );
+                        partial.addEditShortcutToPlacement( placement, $shortcut );
                         $shortcut.on( 'click', function( event ) {
                                 event.preventDefault();
                                 event.stopPropagation();
@@ -127 +127 @@
                 },
 
                 /**
-                 * Position an edit shortcut for the placement container.
-                 *
-                 * The shortcut must already be created and added to the page.
+                 * Add an edit shortcut to the placement container.
                  *
                  * @since 4.7
                  *
@@ -137 +135 @@
                  * @param {jQuery} $editShortcut The shortcut element as a jQuery object.
                  * @returns {void}
                  */
-                positionEditShortcut: function( placement, $editShortcut ) {
-                        var $placementContainer = $( placement.container ), $editButton;
-                        $placementContainer.prepend( $editShortcut );
+                addEditShortcutToPlacement: function( placement, $editShortcut ) {
+                        var $placementContainer = $( placement.container );
+                        if ( ! $editShortcut.addedToPlacement ) {
+                                $placementContainer.prepend( $editShortcut );
+                                $editShortcut.addedToPlacement = true;
+                        }
                         if ( ! $placementContainer.is( ':visible' ) || 'none' === $placementContainer.css( 'display' ) ) {
                                 $editShortcut.addClass( 'customize-partial-edit-shortcut-hidden' );
                         }
-                        $editButton = $editShortcut.find( 'button' );
-                        $editShortcut.toggleClass( 'customize-partial-edit-shortcut-left-margin', $editButton.offset().left < 2 );
                 },
 
                 /**