--- a/app/helpers/browse_helper.rb
+++ b/app/helpers/browse_helper.rb
@@ -84,6 +84,11 @@ module BrowseHelper
     out << "<td>&nbsp</td></tr>\n"
     out << "</thead>\n"
     out << differ.render(Gitorious::Diff::InlineTableCallback.new)
+    out << %Q{<tr class="toggle_diff"><td colspan="3">}
+    out << %Q{<small>#{link_to_function "toggle raw diff", "$('diff#{udiff.object_id}').toggle()"}</small></td></tr>}
+    out << %Q{<tr class="raw_diff"><td colspan="3" style="display:none" id="diff#{udiff.object_id}">}
+    out << %Q{<pre>#{h(udiff)}</pre>}
+    out << "</td></tr>"
     out << "</table>"
     out
   end
@@ -93,9 +98,14 @@ module BrowseHelper
     out = %Q{<table class="codediff sidebyside">\n}
     out << %Q{<colgroup class="left"><col class="lines"/><col class="code"/></colgroup>}
     out << %Q{<colgroup class="right"><col class="lines"/><col class="code"/></colgroup>}
-    out << %Q{<thead><th colspan="2">#{src_sha}</th>}
-    out << %Q{<th colspan="2">#{dst_sha}</th></thead>}
+    out << %Q{<thead><th colspan="2" class="line-numbers">#{src_sha}</th>}
+    out << %Q{<th colspan="2" class="line-numbers">#{dst_sha}</th></thead>}
     out << differ.render(Gitorious::Diff::SidebysideTableCallback.new)
+    out << %Q{<tr class="toggle_diff"><td colspan="4">}
+    out << %Q{<small>#{link_to_function "toggle raw diff", "$('diff#{udiff.object_id}').toggle()"}</small></td></tr>}
+    out << %Q{<tr class="raw_diff"><td colspan="4" style="display:none" id="diff#{udiff.object_id}">}
+    out << %Q{<pre>#{h(udiff)}</pre>}
+    out << "</td></tr>"
     out << "</table>"
     out
   end

--- a/app/views/browse/commit.html.erb
+++ b/app/views/browse/commit.html.erb
@@ -22,13 +22,9 @@
   <h2>Commit diff</h2>
   <%= render_diffmode_selector -%>
 
-  <% @diff.each do |file| -%>
+  <% @diff.each do |file, index| -%>
     <h4><%= h(file.path) -%><%#=link_to h(file.path), blob_path(file.sha, file.path) -%></h4>
     <%= render_diff(file.patch, file.src, file.dst, @diffmode) -%>
-    <small><%= link_to_function "toggle raw diff", "$('#{file.object_id}').toggle()" -%></small>
-    <div class="toggle_diff" style="display:none" id="<%= file.object_id -%>">
-    <p><pre><%=  h(file.patch) -%></pre></p>
-    </div>
   <% end -%>
 <% end -%>
 

--- a/public/stylesheets/base.css
+++ b/public/stylesheets/base.css
@@ -618,7 +618,10 @@ small.hint { font-size: 83%;}
 }
 
 /* diff mode selector */
-ul.mode_selector { float: right;}
+ul.mode_selector { 
+  float: right;
+  margin-top: -35px;
+}
 ul.mode_selector li {
   display:inline;
   margin-left: 1em;
@@ -627,9 +630,15 @@ ul.mode_selector li.list_header { font-weight: bold; }
 ul.mode_selector li.selected    { border-bottom: 1px solid #666; }
 
 /* Diff rendering */ 
-
-.toggle_diff {
-  
+tr.toggle_diff { border-top: 1px solid #999; }
+tr.toggle_diff td {
+  background: #ddd;
+  padding: 0 5px 2px 5px;
+  margin-bottom: 5px;
+}
+tr.toggle_diff td small { float:right;}
+tr.raw_diff td { 
+  padding-top: 5px;
 }
 
 table tr .line-numbers {
@@ -655,6 +664,7 @@ table tr td.code {
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  background: #fff;
  font: 95%/110% "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
+ border-right: 1px solid #999;
 }
 
 table tr td.unwrapped {