Ticket #27348: 27348.5.patch

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

@@ -50 +50 @@
         left: auto !important;
         max-width: 100%;
 }
+
 .customize-control-widget_form.wide-widget-control .widget-inside {
         position: fixed;
         left: 299px;
         top: 25%;
-        padding: 20px;
         border: 1px solid rgb(229, 229, 229);
-        z-index: -1;
+        overflow: auto;
 }
-.customize-control-widget_form.wide-widget-control.collapsing .widget-inside {
-        z-index: -2;
+.customize-control-widget_form.wide-widget-control .widget-inside > .form {
+        padding: 20px;
 }
 
 .customize-control-widget_form.wide-widget-control .widget-top {

src/wp-admin/js/customize-widgets.js

@@ -703 +703 @@
                 _setupWideWidget: function () {
                         var control = this,
                                 widget_inside,
+                                widget_form,
                                 customize_sidebar,
                                 position_widget,
                                 theme_controls_container;
@@ -712 +713 @@
                         }
 
                         widget_inside = control.container.find( '.widget-inside' );
+                        widget_form = widget_inside.find( '> .form' );
                         customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );
                         control.container.addClass( 'wide-widget-control' );
 
                         control.container.find( '.widget-content:first' ).css( {
-                                'min-width': control.params.width,
+                                'max-width': control.params.width,
                                 'min-height': control.params.height
                         } );
 
@@ -725 +727 @@
                          * element is at the same top position as the widget-top. When the
                          * widget-top is scrolled out of view, keep the widget-top in view;
                          * likewise, don't allow the widget to drop off the bottom of the window.
+                         * If a widget is too tall to fit in the window, don't let the height
+                         * exceed the window height so that the contents of the widget control
+                         * will become scrollable (overflow:auto).
                          */
                         position_widget = function () {
                                 var offset_top = control.container.offset().top,
-                                        height,
-                                        top,
-                                        max_top;
-
-                                height = widget_inside.outerHeight();
-                                top = Math.max( offset_top, 0 );
-                                max_top = $( window ).height() - height;
-                                top = Math.min( top, max_top );
+                                        window_height = $( window ).height(),
+                                        form_height = widget_form.outerHeight(),
+                                        top;
+                                widget_inside.css( 'max-height', window_height );
+                                top = Math.max(
+                                        0, // prevent top from going off screen
+                                        Math.min(
+                                                Math.max( offset_top, 0 ), // distance widget in panel is from top of screen
+                                                window_height - form_height // flush up against bottom of screen
+                                        )
+                                );
                                 widget_inside.css( 'top', top );
                         };
 
                         theme_controls_container = $( '#customize-theme-controls' );
                         control.container.on( 'expand', function () {
+                                position_widget();
                                 customize_sidebar.on( 'scroll', position_widget );
                                 $( window ).on( 'resize', position_widget );
                                 theme_controls_container.on( 'expanded collapsed', position_widget );
-                                position_widget();
                         } );
                         control.container.on( 'collapsed', function () {
                                 customize_sidebar.off( 'scroll', position_widget );
+                                $( window ).off( 'resize', position_widget );
                                 theme_controls_container.off( 'expanded collapsed', position_widget );
-                                $( window ).off( 'resize', position_widget );
                         } );
 
                         // Reposition whenever a sidebar's widgets are changed
@@ -1375 +1383 @@
                                 return;
                         }
 
-                        complete;
                         if ( do_expand ) {
                                 // Close all other widget controls before expanding this one
                                 wp.customize.control.each( function ( other_control ) {
@@ -1384 +1391 @@
                                         }
                                 } );
 
-                                control.container.trigger( 'expand' );
-                                control.container.addClass( 'expanding' );
                                 complete = function () {
                                         control.container.removeClass( 'expanding' );
                                         control.container.addClass( 'expanded' );
@@ -1396 +1401 @@
                                 } else {
                                         inside.slideDown( 'fast', complete );
                                 }
+                                control.container.trigger( 'expand' );
+                                control.container.addClass( 'expanding' );
                         } else {
                                 control.container.trigger( 'collapse' );
                                 control.container.addClass( 'collapsing' );