Ticket #33184: 33184.10.diff

src/wp-admin/css/customize-controls.css

@@ -1294 +1294 @@
         #customize-preview {
                 top: 45px;
                 bottom: 0;
-                height: auto;
         }
 
         .wp-core-ui.wp-customizer .button {

src/wp-admin/css/customize-nav-menus.css

@@ -710 +710 @@
         top: 60px; /* below title div / search input */
         bottom: 0px; /* 100% height that still triggers lazy load */
         max-height: none;
-        width: 270px;
+        width: 100%;
+        padding: 1px 15px 15px;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
 }
 
 #available-menu-items .menu-item-tpl {
@@ -1036 +1040 @@
         display: none;
 }
 
+@media screen and ( max-width: 782px ) {
+        #available-menu-items #available-menu-items-search .accordion-section-content {
+                top: 63px;
+        }
+}
+
 @media screen and ( max-width: 640px ) {
         body.adding-menu-items div#available-menu-items {
                 top: 46px;
@@ -1044 +1054 @@
                 width: 100%;
         }
 
+        #available-menu-items #available-menu-items-search .accordion-section-content {
+                top: 133px;
+        }
+
         #available-menu-items .customize-section-title {
                 display: block;
                 margin: 0;

src/wp-admin/js/customize-nav-menus.js

@@ -360 +360 @@
                         });
                 },
 
-                // Adjust the height of each section of items to fit the screen.
-                itemSectionHeight: function() {
-                        var sections, totalHeight, accordionHeight, diff;
-                        totalHeight = window.innerHeight;
-                        sections = this.$el.find( '.accordion-section-content' );
-                        accordionHeight =  46 * ( 1 + sections.length ) - 16; // Magic numbers.
-                        diff = totalHeight - accordionHeight;
-                        if ( 120 < diff && 290 > diff ) {
-                                sections.css( 'max-height', diff );
-                        }
-                },
-
                 // Highlights a menu item.
                 select: function( menuitemTpl ) {
                         this.selected = $( menuitemTpl );
@@ -466 +454 @@
                 open: function( menuControl ) {
                         this.currentMenuControl = menuControl;
 
-                        this.itemSectionHeight();
-
                         $( 'body' ).addClass( 'adding-menu-items' );
 
                         // Collapse all controls.
@@ -538 +524 @@
                                 content = panelMeta.find( '.customize-panel-description' ),
                                 options = $( '#screen-options-wrap' ),
                                 button = panelMeta.find( '.customize-screen-options-toggle' );
-                        button.on( 'click', function() {
+                        button.on( 'click keydown', function( event ) {
+                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                        return;
+                                }
+                                event.preventDefault();
+
                                 // Hide description
                                 if ( content.not( ':hidden' ) ) {
                                         content.slideUp( 'fast' );
@@ -561 +552 @@
                         } );
 
                         // Help toggle
-                        help.on( 'click', function() {
+                        help.on( 'click keydown', function( event ) {
+                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                                        return;
+                                }
+                                event.preventDefault();
+
                                 if ( 'true' === button.attr( 'aria-expanded' ) ) {
                                         button.attr( 'aria-expanded', 'false' );
                                         help.attr( 'aria-expanded', 'true' );