Wrapped subpanel content with div.scroll and fixed a few minor CSS problems.

5 files changed, 99 insertions, 91 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index 316f4df..65108b1 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -9,16 +9,17 @@
 #djDebug dl, #djDebug dt, #djDebug dd, #djDebug ol, #djDebug ul, #djDebug li,
 #djDebug fieldset, #djDebug form, #djDebug label, #djDebug legend,
 #djDebug table, #djDebug caption, #djDebug tbody, #djDebug tfoot, #djDebug thead, #djDebug tr, #djDebug th, #djDebug td {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	font-size: 12px;
-	line-height: 1.5em;
-	color: #000;
-	vertical-align: baseline;
-	background: transparent;
-	font-family: sans-serif;
+	margin:0;
+	padding:0;
+	border:0;
+	outline:0;
+	font-size:12px;
+	line-height:1.5em;
+	color:#000;
+	vertical-align:baseline;
+	background:transparent;
+	font-family:sans-serif;
+	text-align:left;
 }
 
 #djDebug #djDebugToolbar {
@@ -130,6 +131,7 @@
 
 #djDebug pre {
 	background-color:#ffffff;
+	overflow:auto;
 }
 
 #djDebug tr.djDebugOdd pre {
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.min.css b/debug_toolbar/media/debug_toolbar/toolbar.min.css
index 3de6dac..f1d9f17 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.min.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.min.css
@@ -1 +1 @@
-#djDebug{color:#000;background:#FFF;}#djDebug,#djDebug div,#djDebug span,#djDebug applet,#djDebug object,#djDebug iframe,#djDebug h1,#djDebug h2,#djDebug h3,#djDebug h4,#djDebug h5,#djDebug h6,#djDebug p,blockquote,#djDebug pre,#djDebug a,#djDebug abbr,#djDebug acronym,#djDebug address,#djDebug big,#djDebug cite,#djDebug code,#djDebug del,#djDebug dfn,#djDebug em,#djDebug font,#djDebug img,#djDebug ins,#djDebug kbd,#djDebug q,#djDebug s,#djDebug samp,#djDebug small,#djDebug strike,#djDebug strong,#djDebug sub,#djDebug sup,#djDebug tt,#djDebug var,#djDebug b,#djDebug u,#djDebug i,#djDebug center,#djDebug dl,#djDebug dt,#djDebug dd,#djDebug ol,#djDebug ul,#djDebug li,#djDebug fieldset,#djDebug form,#djDebug label,#djDebug legend,#djDebug table,#djDebug caption,#djDebug tbody,#djDebug tfoot,#djDebug thead,#djDebug tr,#djDebug th,#djDebug td{margin:0;padding:0;border:0;outline:0;font-size:12px;line-height:1.5em;color:#000;vertical-align:baseline;background:transparent;font-family:sans-serif;}#djDebug #djDebugToolbar{background:#111;width:200px;z-index:100000000;position:fixed;top:0;bottom:0;right:0;opacity:.9;}#djDebug #djDebugToolbar small{color:#999;}#djDebug #djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebug #djDebugToolbar li{border-bottom:1px solid #222;color:#fff;display:block;font-weight:bold;float:none;margin:0;padding:0;position:relative;width:auto;}#djDebug #djDebugToolbar li>a,#djDebug #djDebugToolbar li>div.contentless{font-weight:normal;font-style:normal;text-decoration:none;display:block;font-size:16px;padding:10px 10px 5px 25px;color:#fff;}#djDebug #djDebugToolbar li a:hover{color:#111;background-color:#ffc;}#djDebug #djDebugToolbar li.active{background-image:url(indicator.png);background-repeat:no-repeat;background-position:left center;background-color:#333;padding-left:10px;}#djDebug #djDebugToolbar li.active a:hover{color:#b36a60;background-color:transparent;}#djDebug #djDebugToolbar li small{font-size:12px;color:#999;font-style:normal;text-decoration:none;font-variant:small-caps;}#djDebug #djDebugToolbarHandle{position:fixed;background:#fff;border:1px solid #111;top:30px;right:0;z-index:100000000;opacity:.75;}#djDebug a#djShowToolBarButton{display:block;height:75px;width:30px;border-right:none;border-bottom:4px solid #fff;border-top:4px solid #fff;border-left:4px solid #fff;color:#fff;font-size:10px;font-weight:bold;text-decoration:none;text-align:center;text-indent:-999999px;background:#000 url(djdt_vertical.png) no-repeat left center;opacity:.5;}#djDebug a#djShowToolBarButton:hover{background-color:#111;padding-right:6px;border-top-color:#FFE761;border-left-color:#FFE761;border-bottom-color:#FFE761;opacity:1.0;}#djDebug pre{background-color:#fff;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{display:none;position:fixed;margin:0;top:0;right:200px;bottom:0;left:0;background-color:#eee;color:#666;z-index:100000000;}#djDebug .panelContent>div{border-bottom:1px solid #ddd;}#djDebug .djDebugPanelTitle{position:absolute;background-color:#ffc;color:#666;padding-left:20px;top:0;right:0;left:0;height:50px;}#djDebug .djDebugPanelContent{position:absolute;top:50px;right:0;bottom:0;left:0;height:auto;padding:0 0 0 20px;}#djDebug .djDebugPanelContent .scroll{height:100%;overflow:auto;display:block;padding:0 10px 0 0;}#djDebug h3{font-size:24px;font-weight:normal;line-height:50px;}#djDebug h4{font-size:20px;font-weight:bold;margin-top:.8em;}#djDebug .panelContent table{border:1px solid #ccc;border-collapse:collapse;width:100%;background-color:#fff;display:block;margin-top:.8em;}#djDebug .panelContent tbody td,#djDebug .panelContent tbody th{vertical-align:top;padding:2px 3px;}#djDebug .panelContent thead th{padding:1px 6px 1px 3px;background:#fefefe;text-align:left;font-weight:normal;font-size:11px;border:1px solid #ddd;}#djDebug .panelContent tbody th{width:12em;text-align:right;color:#666;padding-right:.5em;}#djDebug .panelContent code{font-family:Consolas,Monaco,"Bitstream Vera Sans Mono","Lucida Console",monospace;}#djDebug .panelContent .close{text-indent:-9999999px;display:block;position:absolute;top:4px;right:15px;height:40px;width:40px;background:url(close.png) no-repeat center center;}#djDebug .panelContent .close:hover{background-image:url(close_hover.png);}#djDebug .panelContent .close.back{background-image:url(back.png);}#djDebug .panelContent .close.back:hover{background-image:url(back_hover.png);}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dt{margin-top:.75em;}#djDebug .panelContent dd{margin-left:10px;}#djDebug a.toggleTemplate{padding:4px;background-color:#bbb;-moz-border-radius:3px;-webkit-border-radius:3px;}#djDebug a.toggleTemplate:hover{padding:4px;background-color:#444;color:#ffe761;-moz-border-radius:3px;-webkit-border-radius:3px;}#djDebug a.djTemplateShowContext,#djDebug a.djTemplateShowContext span.toggleArrow{color:#999;}#djDebug a.djTemplateShowContext:hover,#djDebug a.djTemplateShowContext:hover span.toggleArrow{color:#000;cursor:pointer;}#djDebug .djDebugSqlWrap{position:relative;}#djDebug .djDebugSql{z-index:100000002;}#djDebug span.djDebugLineChart{border-top:3px solid #777;position:absolute;bottom:0;top:0;left:0;display:block;z-index:1000000001;}#djDebug span.djDebugLineChartWarning{border-top-color:#900;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#000;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#000;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#000;font-weight:bold;}#djDebug .highlight .s{color:#333;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#000;font-weight:bold;}#djDebug .highlight .na{color:#333;}#djDebug .highlight .nt{color:#000;font-weight:bold;}#djDebug .highlight .nv{color:#333;}#djDebug .highlight .s2{color:#333;}#djDebug .highlight .cp{color:#333;}
\ No newline at end of file
+#djDebug{color:#000;background:#FFF;}#djDebug,#djDebug div,#djDebug span,#djDebug applet,#djDebug object,#djDebug iframe,#djDebug h1,#djDebug h2,#djDebug h3,#djDebug h4,#djDebug h5,#djDebug h6,#djDebug p,blockquote,#djDebug pre,#djDebug a,#djDebug abbr,#djDebug acronym,#djDebug address,#djDebug big,#djDebug cite,#djDebug code,#djDebug del,#djDebug dfn,#djDebug em,#djDebug font,#djDebug img,#djDebug ins,#djDebug kbd,#djDebug q,#djDebug s,#djDebug samp,#djDebug small,#djDebug strike,#djDebug strong,#djDebug sub,#djDebug sup,#djDebug tt,#djDebug var,#djDebug b,#djDebug u,#djDebug i,#djDebug center,#djDebug dl,#djDebug dt,#djDebug dd,#djDebug ol,#djDebug ul,#djDebug li,#djDebug fieldset,#djDebug form,#djDebug label,#djDebug legend,#djDebug table,#djDebug caption,#djDebug tbody,#djDebug tfoot,#djDebug thead,#djDebug tr,#djDebug th,#djDebug td{margin:0;padding:0;border:0;outline:0;font-size:12px;line-height:1.5em;color:#000;vertical-align:baseline;background:transparent;font-family:sans-serif;text-align:left;}#djDebug #djDebugToolbar{background:#111;width:200px;z-index:100000000;position:fixed;top:0;bottom:0;right:0;opacity:.9;}#djDebug #djDebugToolbar small{color:#999;}#djDebug #djDebugToolbar ul{margin:0;padding:0;list-style:none;}#djDebug #djDebugToolbar li{border-bottom:1px solid #222;color:#fff;display:block;font-weight:bold;float:none;margin:0;padding:0;position:relative;width:auto;}#djDebug #djDebugToolbar li>a,#djDebug #djDebugToolbar li>div.contentless{font-weight:normal;font-style:normal;text-decoration:none;display:block;font-size:16px;padding:10px 10px 5px 25px;color:#fff;}#djDebug #djDebugToolbar li a:hover{color:#111;background-color:#ffc;}#djDebug #djDebugToolbar li.active{background-image:url(indicator.png);background-repeat:no-repeat;background-position:left center;background-color:#333;padding-left:10px;}#djDebug #djDebugToolbar li.active a:hover{color:#b36a60;background-color:transparent;}#djDebug #djDebugToolbar li small{font-size:12px;color:#999;font-style:normal;text-decoration:none;font-variant:small-caps;}#djDebug #djDebugToolbarHandle{position:fixed;background:#fff;border:1px solid #111;top:30px;right:0;z-index:100000000;opacity:.75;}#djDebug a#djShowToolBarButton{display:block;height:75px;width:30px;border-right:none;border-bottom:4px solid #fff;border-top:4px solid #fff;border-left:4px solid #fff;color:#fff;font-size:10px;font-weight:bold;text-decoration:none;text-align:center;text-indent:-999999px;background:#000 url(djdt_vertical.png) no-repeat left center;opacity:.5;}#djDebug a#djShowToolBarButton:hover{background-color:#111;padding-right:6px;border-top-color:#FFE761;border-left-color:#FFE761;border-bottom-color:#FFE761;opacity:1.0;}#djDebug pre{background-color:#fff;overflow:auto;}#djDebug tr.djDebugOdd pre{background-color:#eee;}#djDebug .panelContent{display:none;position:fixed;margin:0;top:0;right:200px;bottom:0;left:0;background-color:#eee;color:#666;z-index:100000000;}#djDebug .panelContent>div{border-bottom:1px solid #ddd;}#djDebug .djDebugPanelTitle{position:absolute;background-color:#ffc;color:#666;padding-left:20px;top:0;right:0;left:0;height:50px;}#djDebug .djDebugPanelContent{position:absolute;top:50px;right:0;bottom:0;left:0;height:auto;padding:0 0 0 20px;}#djDebug .djDebugPanelContent .scroll{height:100%;overflow:auto;display:block;padding:0 10px 0 0;}#djDebug h3{font-size:24px;font-weight:normal;line-height:50px;}#djDebug h4{font-size:20px;font-weight:bold;margin-top:.8em;}#djDebug .panelContent table{border:1px solid #ccc;border-collapse:collapse;width:100%;background-color:#fff;display:block;margin-top:.8em;}#djDebug .panelContent tbody td,#djDebug .panelContent tbody th{vertical-align:top;padding:2px 3px;}#djDebug .panelContent thead th{padding:1px 6px 1px 3px;background:#fefefe;text-align:left;font-weight:normal;font-size:11px;border:1px solid #ddd;}#djDebug .panelContent tbody th{width:12em;text-align:right;color:#666;padding-right:.5em;}#djDebug .panelContent code{font-family:Consolas,Monaco,"Bitstream Vera Sans Mono","Lucida Console",monospace;}#djDebug .panelContent .close{text-indent:-9999999px;display:block;position:absolute;top:4px;right:15px;height:40px;width:40px;background:url(close.png) no-repeat center center;}#djDebug .panelContent .close:hover{background-image:url(close_hover.png);}#djDebug .panelContent .close.back{background-image:url(back.png);}#djDebug .panelContent .close.back:hover{background-image:url(back_hover.png);}#djDebug .panelContent dt,#djDebug .panelContent dd{display:block;}#djDebug .panelContent dt{margin-top:.75em;}#djDebug .panelContent dd{margin-left:10px;}#djDebug a.toggleTemplate{padding:4px;background-color:#bbb;-moz-border-radius:3px;-webkit-border-radius:3px;}#djDebug a.toggleTemplate:hover{padding:4px;background-color:#444;color:#ffe761;-moz-border-radius:3px;-webkit-border-radius:3px;}#djDebug a.djTemplateShowContext,#djDebug a.djTemplateShowContext span.toggleArrow{color:#999;}#djDebug a.djTemplateShowContext:hover,#djDebug a.djTemplateShowContext:hover span.toggleArrow{color:#000;cursor:pointer;}#djDebug .djDebugSqlWrap{position:relative;}#djDebug .djDebugSql{z-index:100000002;}#djDebug span.djDebugLineChart{border-top:3px solid #777;position:absolute;bottom:0;top:0;left:0;display:block;z-index:1000000001;}#djDebug span.djDebugLineChartWarning{border-top-color:#900;}#djDebug .highlight{color:#000;}#djDebug .highlight .err{color:#000;}#djDebug .highlight .g{color:#000;}#djDebug .highlight .k{color:#000;font-weight:bold;}#djDebug .highlight .o{color:#000;}#djDebug .highlight .n{color:#000;}#djDebug .highlight .mi{color:#000;font-weight:bold;}#djDebug .highlight .l{color:#000;}#djDebug .highlight .x{color:#000;}#djDebug .highlight .p{color:#000;}#djDebug .highlight .m{color:#000;font-weight:bold;}#djDebug .highlight .s{color:#333;}#djDebug .highlight .w{color:#888;}#djDebug .highlight .il{color:#000;font-weight:bold;}#djDebug .highlight .na{color:#333;}#djDebug .highlight .nt{color:#000;font-weight:bold;}#djDebug .highlight .nv{color:#333;}#djDebug .highlight .s2{color:#333;}#djDebug .highlight .cp{color:#333;}
\ No newline at end of file
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
index 57fa538..586bc25 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_explain.html
@@ -1,31 +1,33 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
 	<a class="close back" href="">{% trans "Back" %}</a>
-	<h3>SQL Explained</h3>
+	<h3>{% trans "SQL Explained" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	<dl>
-		<dt>{% trans "Executed SQL" %}</dt>
-		<dd>{{ sql|safe }}</dd>
-		<dt>{% trans "Time" %}</dt>
-		<dd>{{ duration }} ms</dd>
-	</dl>
-	<table>
-		<thead>
-			<tr>
-				{% for h in headers %}
-					<th>{{ h|upper }}</th>
-				{% endfor %}
-			</tr>
-		</thead>
-		<tbody>
-			{% for row in result %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					{% for column in row %}
-						<td>{{ column|escape }}</td>
+	<div class="scroll">
+		<dl>
+			<dt>{% trans "Executed SQL" %}</dt>
+			<dd>{{ sql|safe }}</dd>
+			<dt>{% trans "Time" %}</dt>
+			<dd>{{ duration }} ms</dd>
+		</dl>
+		<table>
+			<thead>
+				<tr>
+					{% for h in headers %}
+						<th>{{ h|upper }}</th>
 					{% endfor %}
 				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
+			</thead>
+			<tbody>
+				{% for row in result %}
+					<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+						{% for column in row %}
+							<td>{{ column|escape }}</td>
+						{% endfor %}
+					</tr>
+				{% endfor %}
+			</tbody>
+		</table>
+	</div>
 </div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
index a3d3240..f551a6f 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_profile.html
@@ -1,38 +1,40 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
 	<a class="close back" href="">{% trans "Back" %}</a>
-	<h3>SQL Profiled</h3>
+	<h3>{% trans "SQL Profiled" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	{% if result %}
-		<dl>
-			<dt>{% trans "Executed SQL" %}</dt>
-			<dd>{{ sql|safe }}</dd>
-			<dt>{% trans "Time" %}</dt>
-			<dd>{{ duration }} ms</dd>
-		</dl>
-		<table>
-			<thead>
-				<tr>
-					{% for h in headers %}
-						<th>{{ h|upper }}</th>
-					{% endfor %}
-				</tr>
-			</thead>
-			<tbody>
-				{% for row in result %}
-					<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-						{% for column in row %}
-							<td>{{ column|escape }}</td>
+	<div class="scroll">
+		{% if result %}
+			<dl>
+				<dt>{% trans "Executed SQL" %}</dt>
+				<dd>{{ sql|safe }}</dd>
+				<dt>{% trans "Time" %}</dt>
+				<dd>{{ duration }} ms</dd>
+			</dl>
+			<table>
+				<thead>
+					<tr>
+						{% for h in headers %}
+							<th>{{ h|upper }}</th>
 						{% endfor %}
 					</tr>
-				{% endfor %}
-			</tbody>
-		</table>
-	{% else %}
-		<dl>
-			<dt>{% trans 'Error' %}</dt>
-			<dd>{{ result_error }}</dd>
-		</dl>
-	{% endif %}
+				</thead>
+				<tbody>
+					{% for row in result %}
+						<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+							{% for column in row %}
+								<td>{{ column|escape }}</td>
+							{% endfor %}
+						</tr>
+					{% endfor %}
+				</tbody>
+			</table>
+		{% else %}
+			<dl>
+				<dt>{% trans 'Error' %}</dt>
+				<dd>{{ result_error }}</dd>
+			</dl>
+		{% endif %}
+	</div>
 </div>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
index a240b07..fd839eb 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/sql_select.html
@@ -1,35 +1,37 @@
 {% load i18n %}
 <div class="djDebugPanelTitle">
 	<a class="close back" href="">{% trans "Back" %}</a>
-	<h3>SQL Selected</h3>
+	<h3>{% trans "SQL Selected" %}</h3>
 </div>
 <div class="djDebugPanelContent">
-	<dl>
-		<dt>{% trans "Executed SQL" %}</dt>
-		<dd>{{ sql|safe }}</dd>
-		<dt>{% trans "Time" %}</dt>
-		<dd>{{ duration }} ms</dd>
-	</dl>
-	{% if result %}
-	<table>
-		<thead>
-			<tr>
-				{% for h in headers %}
-					<th>{{ h|upper }}</th>
-				{% endfor %}
-			</tr>
-		</thead>
-		<tbody>
-			{% for row in result %}
-				<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
-					{% for column in row %}
-						<td>{{ column|escape }}</td>
+	<div class="scroll">
+		<dl>
+			<dt>{% trans "Executed SQL" %}</dt>
+			<dd>{{ sql|safe }}</dd>
+			<dt>{% trans "Time" %}</dt>
+			<dd>{{ duration }} ms</dd>
+		</dl>
+		{% if result %}
+		<table>
+			<thead>
+				<tr>
+					{% for h in headers %}
+						<th>{{ h|upper }}</th>
 					{% endfor %}
 				</tr>
-			{% endfor %}
-		</tbody>
-	</table>
-	{% else %}
-		<p>{% trans "Empty set" %}</p>
-	{% endif %}
+			</thead>
+			<tbody>
+				{% for row in result %}
+					<tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
+						{% for column in row %}
+							<td>{{ column|escape }}</td>
+						{% endfor %}
+					</tr>
+				{% endfor %}
+			</tbody>
+		</table>
+		{% else %}
+			<p>{% trans "Empty set" %}</p>
+		{% endif %}
+	</div>
 </div>