Ticket #27348: 27348.diff

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

@@ -649 +649 @@
                 _setupWideWidget: function () {
                         var control = this,
                                 widget_inside,
+                                widget_form,
                                 customize_sidebar,
                                 position_widget,
                                 theme_controls_container;
@@ -658 +659 @@
                         }
 
                         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' );
 
@@ -671 +673 @@
                          * 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 );
                         };