diff --git a/common/css/xe.css b/common/css/xe.css
index 9cd77655c..9c1d76115 100644
--- a/common/css/xe.css
+++ b/common/css/xe.css
@@ -341,15 +341,18 @@ button.btn {
 	color: #fcfcfc;
 	position: absolute;
 	left: 10px; top: 10px;
+	margin: 0; padding: 0;
 }
 #rhymix_debug_panel .debug_header .debug_maximize {
 	font: normal 20px/24px Arial, sans-serif;
+	text-decoration: none;
 	color: #444444;
 	position: absolute;
-	right: 32px; top: 7px;	
+	right: 32px; top: 6px;	
 }
 #rhymix_debug_panel .debug_header .debug_close {
 	font: normal 28px/28px Arial, sans-serif;
+	text-decoration: none;
 	color: #444444;
 	position: absolute;
 	right: 10px; top: 4px;	
diff --git a/common/js/debug.js b/common/js/debug.js
index 560cedfc6..dcbd84e5a 100644
--- a/common/js/debug.js
+++ b/common/js/debug.js
@@ -15,7 +15,8 @@ $(function() {
 	// Initialize the debug button.
 	$('<a href="#"></a>').text("DEBUG").appendTo(button).click(function(event) {
 		event.preventDefault();
-		panel.css({ width: 0 }).show().animate({ width: 540 }, 200);
+		var max_width = Math.min(540, $(window).width());
+		panel.css({ width: max_width, left: max_width * -1 }).show().animate({ left: 0 }, 200);
 		button.hide();
 	});
 	
@@ -27,7 +28,7 @@ $(function() {
 	}));
 	header.append($('<a class="debug_close" href="#">&times;</a>').click(function(event) {
 		event.preventDefault();
-		panel.animate({ width: 0 }, 200, function() {
+		panel.animate({ left: panel.width() * -1 }, 200, function() {
 			panel.hide();
 			button.show();
 		});