Ticket #27348: 27348.3.patch

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

@@ -54 +54 @@
         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 .widget-inside > .form {
+        padding: 20px;
 }
 .customize-control-widget_form.wide-widget-control.collapsing .widget-inside {
         z-index: -2;

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' );
 
@@ -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 );
                         };
 
@@ -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' );