diff --git a/ui/css/editor.css b/ui/css/editor.css
index 8646bc4d..ed53f914 100755
--- a/ui/css/editor.css
+++ b/ui/css/editor.css
@@ -44,7 +44,8 @@
 }
 .panel .panel-content {
 	display: block;
-	min-height: 30px;
+
+	min-height: 15px;
 }
 .sub-panel,
 .panel button,
@@ -70,7 +71,8 @@
 	*/
 }
 .sub-panel .sub-panel-content {
-	margin: 10px;
+	margin-left: 10px;
+	margin-right: 10px;
 }
 
 .panel button:active,
diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html
index c64cdf72..9ce52df3 100755
--- a/ui/experiments/panels.html
+++ b/ui/experiments/panels.html
@@ -1,5 +1,6 @@
 <html>
 
+<link rel="stylesheet" href="../css/ui-lightness/jquery-ui.css">
 <link rel="stylesheet" type="text/css" href="../css/editor.css">
 
 <style>
@@ -15,7 +16,6 @@ body.gray {
 	color: silver;
 }
 
-
 </style>
 
 <script src="../ext-lib/jquery.js"></script>
@@ -56,18 +56,11 @@ $(function(){
 		})
 
 
-	makeSubPanel('Test Sub Panel A', true, panel)
-		.find('.content')
-			.html('<h1>Panel A</h1>')
+	makeSubPanel('Test Sub Panel A', $('<h1>Panel A</h1>'), panel, true, true)
 
-	makeSubPanel('Test Sub Panel B', true, panel)
-		.find('.content')
-			.html('<h2>Panel B</h2>')
-
-	makeSubPanel('Test Sub Panel C', true, panel)
-		.find('.content')
-			.html('<h3>Panel C</h3>')
+	makeSubPanel('Test Sub Panel B', $('<h2>Panel B</h2>'), panel, true)
 
+	makeSubPanel('Test Sub Panel C', $('<h3>Panel C</h3>'), panel, false)
 
 
 	$('body')
diff --git a/ui/lib/panels.js b/ui/lib/panels.js
index e5f98a93..255c4914 100755
--- a/ui/lib/panels.js
+++ b/ui/lib/panels.js
@@ -69,7 +69,9 @@ function wrapWithPanel(panel, parent, offset){
 // close the panel and fire close events on it and all sub-panels...
 //
 function closePanel(panel, skip_sub_panel_events){
-	skip_sub_panel_events = skip_sub_panel_events == null ? false : true
+	skip_sub_panel_events = skip_sub_panel_events == null 
+		? false 
+		: skip_sub_panel_events
 	if(!skip_sub_panel_events){
 		panel.find('.sub-panel')
 			.trigger('panelClosing')
@@ -246,14 +248,25 @@ function makeSidePanel(side, autohide){
 }
 
 
-function makeSubPanel(title, open, parent){
+//function makeSubPanel(title, open, parent, content_resizable){
+function makeSubPanel(title, content, parent, open, content_resizable){
 	title = title == null || title.trim() == '' ? '&nbsp;' : title
 
+	open = open == null ? true : open
+	content_resizable = content_resizable == null 
+		? false 
+		: content_resizable
+
+	var content_elem = $('<div class="sub-panel-content content"/>')
+	if(content != null){
+		content_elem
+			.append(content)
+	}
 	var sub_panel = $('<details/>')
 		.addClass('sub-panel noScroll')
-		.prop('open', open == null ? true : open)
+		.prop('open', open)
 		.append($('<summary>'+title+'</summary>'))
-		.append($('<div class="sub-panel-content content"/>'))
+		.append(content_elem)
 
 	if(parent != null){
 		if(parent.hasClass('panel-content')){
@@ -263,6 +276,20 @@ function makeSubPanel(title, open, parent){
 		}
 	}
 
+	if(content_resizable){
+		// NOTE: we are wrapping the content into a div so as to make 
+		// 		the fact that the panel is resizable completely 
+		// 		transparent for the user -- no need to be aware of the 
+		// 		sizing elements, etc.
+		content_elem.wrap($('<div>')).parent()
+			.resizable({
+				handles: 's',
+			})
+			.css({
+				overflow: 'hidden',
+			})
+	}
+
 	return sub_panel
 }
 
