Problem

The default placement of the web part properties toolpane is sometimes troublesome to custom designs as well as a horrible user experience. The method SharePoint uses to display this panel is basically wrapping your main content in a table and adding an extra column for this toolpane. This can blow out a custom design and make things look pretty ugly for the content editor. 

This method also causes issues when editing a long page where the toolpane and actual web part may not be visible at the same time. Causing the need to scroll back and forth to adjust the web part properties. 

Solution

Add the following below to your css and javascript. This is assuming you have installed jQuery and jQueryUI.

Update 7/11/2012 - Modified jquery to prevent dragging when using scrollbar that may appear in the properties panel. Also tweaked css to modify cursor selector.

CSS 

/* web part tool pane */
.ms-ToolPaneOuter {
position:fixed;
bottom:30px;
right:0;
}
.ms-ToolPaneBody {
overflow:auto !important;
max-height:100%;
}
#MSOTlPn_ToolPaneCaption {
cursor:move;
}
/* end web part tool pane */

Javascript

$(document).ready(function (e) {

// move web part console
if($('.ms-ToolPaneOuter').size() > 0) {
   // shrink the add column
   $('.ms-ToolPaneOuter').parent().width('0px');
   // calc a good max height
   tpHeight = parseInt($(window).height()) - 300;
   $('.ms-ToolPaneBody').css('max-height',tpHeight+'px');
   // enable dragging of the panel, added handler to prevent scroll drag
   $(".ms-ToolPaneOuter").draggable({handle: '#MSOTlPn_ToolPaneCaption'});
} 

});