Make diff table more compact

3 files changed, 14 insertions, 8 deletions

diff --git a/lib/render.js b/lib/render.js
index 7c2cf64..36f23ba 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -728,14 +728,15 @@ Render.prototype.textEditDiffTable = function (oldMsg, newMsg) {
   var newText = String(newC.text || newC.description || '')
   var diff = Diff.structuredPatch('', '', oldText, newText)
   var self = this
-  return h('table', [
+  // note: this structure is duplicated in lib/render.js
+  return h('table', {class: 'diff-table'}, [
     diff.hunks.map(function (hunk) {
       var oldLine = hunk.oldStart
       var newLine = hunk.newStart
       return [
         h('tr', [
           h('td', {colspan: 2}),
-          h('td', h('pre',
+          h('td', {colspan: 2}, h('pre',
             '@@ -' + oldLine + ',' + hunk.oldLines + ' ' +
             '+' + newLine + ',' + hunk.newLines + ' @@'))
         ]),
@@ -750,8 +751,8 @@ Render.prototype.textEditDiffTable = function (oldMsg, newMsg) {
               lineNums.map(function (num, i) {
                 return h('td', String(num))
               }),
-              h('td', {innerHTML:
-                h('code', s).outerHTML +
+              h('td', {class: 'diff-sigil'}, h('code', s)),
+              h('td', {class: 'diff-line'}, {innerHTML:
                 u.unwrapP(self.markdown(line.substr(1),
                   s == '-' ? oldC.mentions : newC.mentions))
               })
diff --git a/lib/serve.js b/lib/serve.js
index c35d4c9..023fcc5 100644
--- a/lib/serve.js
+++ b/lib/serve.js
@@ -5026,8 +5026,9 @@ Serve.prototype.textEditDiffTable = function (oldMsg, newMsg) {
   var newText = String(newC.text || newC.description || '')
   var diff = Diff.structuredPatch('', '', oldText, newText)
   var self = this
+  // note: this structure is duplicated in lib/serve.js
   return pull(
-    ph('table', [
+    ph('table', {class: 'diff-table'}, [
       pull(
         pull.values(diff.hunks),
         pull.map(function (hunk) {
@@ -5036,7 +5037,7 @@ Serve.prototype.textEditDiffTable = function (oldMsg, newMsg) {
           return [
             ph('tr', [
               ph('td', {colspan: 2}),
-              ph('td', ph('pre',
+              ph('td', {colspan: 2}, ph('pre',
                 '@@ -' + oldLine + ',' + hunk.oldLines + ' ' +
                 '+' + newLine + ',' + hunk.newLines + ' @@'))
             ]),
@@ -5053,8 +5054,8 @@ Serve.prototype.textEditDiffTable = function (oldMsg, newMsg) {
                     lineNums.map(function (num, i) {
                       return ph('td', String(num))
                     }),
-                    ph('td', [
-                     ph('code', s),
+                    ph('td', {class: 'diff-sigil'}, ph('code', s)),
+                    ph('td', {class: 'diff-line'}, [
                      u.unwrapP(self.app.render.markdown(line.substr(1),
                        s == '-' ? oldC.mentions : newC.mentions))
                     ])
diff --git a/static/styles.css b/static/styles.css
index 0214ac4..50ad7c0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -240,5 +240,9 @@ th {
   background-color: #ccc;
 }
 
+.diff-line * {
+  margin: 0;
+}
+
 .diff-old { background-color: #ffe2dd; }
 .diff-new { background-color: #d1ffd6; }