Fix styles to make horizontal diff scrolling more palatable

ooyala · Sep 9, 2011 · 50663c6 · 50663c6
1 parent 4797e1f
commit 50663c6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 31 deletions.
diff --git a/public/styles.less b/public/styles.less
@@ -585,27 +585,24 @@ table.commitsList, table.authorList {
     }
   }
 
-  .data {
-    background-color: @almostWhite;
-    overflow-y: auto;
-    border-collapse: collapse;
-    border: 1px solid #DDDDDD;
+  .dataWrapper {
+    overflow-x: auto;
     width: 100%;
+    background-color: @almostWhite;
+    .data { border-collapse: collapse; }
   }
 
   .filename {
     padding: 5px;
     background-color: @sunkenColor;
-    border: 1px solid #DDDDDD;
-    border-bottom: none;
+    border-bottom: 1px solid #ddd;
     color: #666666;
     font-family: @monoFont;
     font-size: 0.9em;
   }
 
   .file {
-    overflow: auto;
-
+    border: 1px solid #ddd;
     // The styles for inline comments are slightly different than general comments -- they have no left border.
     .comment, .commentForm {
       width: 849px;

diff --git a/views/_diff.erb b/views/_diff.erb
@@ -9,28 +9,30 @@
       <% line_comments = commit_file.line_comments %>
     <% end %>
   </div>
-  <table class="data">
-    <% if file[:binary] %>
-      <tr>
-        <td class="fileBinary">binary file</td>
-      </tr>
-    <% else %>
-      <% file[:lines].each_with_index do |line, index| %>
-        <tr class="diffLine <%= line.chunk ? "chunk" : "" %> <%= line.chunk_start ? "chunk-start" : "" %>"
-            diff-line-number="<%= index + 1 %>">
-          <td class="lineNumber"><%= line.line_num_before || "&nbsp;" %></td>
-          <td class="lineNumber"><%= line.line_num_after || "&nbsp;" %></td>
-          <td class="code">
-            <%= line.formatted %>
-            <% # add line comments
-               while comment_index < line_comments.length &&
-                line_comments[comment_index].line_number == index + 1 %>
-                  <%= erb :_comment, :locals => { :comment => line_comments[comment_index] } %>
-                <% comment_index += 1 %>
-            <% end %>
-          </td>
+  <div class="dataWrapper">
+    <table class="data">
+      <% if file[:binary] %>
+        <tr>
+          <td class="fileBinary">binary file</td>
         </tr>
+      <% else %>
+        <% file[:lines].each_with_index do |line, index| %>
+          <tr class="diffLine <%= line.chunk ? "chunk" : "" %> <%= line.chunk_start ? "chunk-start" : "" %>"
+              diff-line-number="<%= index + 1 %>">
+            <td class="lineNumber"><%= line.line_num_before || "&nbsp;" %></td>
+            <td class="lineNumber"><%= line.line_num_after || "&nbsp;" %></td>
+            <td class="code">
+              <%= line.formatted %>
+              <% # add line comments
+                 while comment_index < line_comments.length &&
+                  line_comments[comment_index].line_number == index + 1 %>
+                    <%= erb :_comment, :locals => { :comment => line_comments[comment_index] } %>
+                  <% comment_index += 1 %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
       <% end %>
-    <% end %>
-  </table>
+    </table>
+  </div>
 </div>