diff --git a/editor/locale/lang.en.js b/editor/locale/lang.en.js
index b2023493..6900021f 100644
--- a/editor/locale/lang.en.js
+++ b/editor/locale/lang.en.js
@@ -116,5 +116,5 @@
 {"id":"tool_node_delete","title":"Delete Node"},
 {"id":"selLayerLabel","textContent":"Move elements to:"},
 {"id":"selLayerNames","title":"Move selected elements to a different layer"},
-{"id":"sidepanel_handle","title":"Drag left/right to resize Layer panel","textContent":"L a y e r s"}
+{"id":"sidepanel_handle","title":"Drag left/right to resize side panel","textContent":"L a y e r s"}
 ];
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 136c6b7c..f26ee906 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -63,7 +63,7 @@ body {
 	top: 75px;
 	left: 40px;
 	bottom: 60px;
-	right: 155px;
+	right: 149px;
 	background-color: #A0A0A0;
 	border: 1px solid #808080;
 	overflow: auto;
@@ -75,7 +75,7 @@ body {
 	top: 75px;
 	bottom: 60px;
 	right: 0px;
-	width: 136px;
+	width: 130px;
 	padding: 12px;
 	border-color: #808080;
 	border-style: solid;
@@ -87,10 +87,10 @@ body {
 	display: inline-block;
 	background-color: #E8E8E8;
 	position:absolute;
-	top: 0px;
+	top: 1px;
 	bottom: 0px;
 	right: 0px;
-	width: 126px;
+	width: 120px;
 	overflow-y: scroll;
 	padding-left: 12px;
 	padding-right: 12px;
@@ -195,6 +195,10 @@ body {
 	font-weight: bold;
 }
 
+#svg_editor #selLayerLabel {
+	white-space: nowrap;
+}
+
 #svg_editor #selLayerNames {
 	display: block;
 }
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 689e1785..08951231 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -71,7 +71,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<option selected="selected" value="layer1">Layer 1</option>
 		</select>
 	</div>
-	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize Layer panel">L a y e r s</div>
+	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel">L a y e r s</div>
 </div>
 
 <div id="logo">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 1a2a52d9..f7d27ce9 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1239,6 +1239,29 @@ function svg_edit_setup() {
 		$('#layerlist tr.layer').removeClass("layersel");
 		$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
 	});
+	
+	var sidedrag = -1;
+	$('#sidepanel_handle')
+		.mousedown(function(evt) {sidedrag = evt.pageX;})
+		.mouseup(function(evt) {sidedrag = -1;});
+	// TODO: is there a better way to do this splitter without attaching mouse handlers here?
+	$('#svg_editor')
+		.mouseup(function(){sidedrag=-1;})
+		.mousemove(function(evt) {
+			if (sidedrag == -1) return;
+			var deltax = sidedrag - evt.pageX;
+			if (deltax == 0) return;
+			sidedrag = evt.pageX;
+			var sidewidth = parseInt($('#sidepanels').css('width'))+deltax;
+			if (sidewidth <= 156 && sidewidth >= 10) {
+				var workarea = $('#workarea');
+				var sidepanels = $('#sidepanels');
+				var layerpanel = $('#layerpanel');
+				workarea.css('right', parseInt(workarea.css('right'))+deltax);
+				sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
+				layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
+			}
+	});
 
 	var populateLayers = function(){
 		var layerlist = $('#layerlist tbody');