From ce51d98e4f7e83bc23101dc980e9017ee6aeb210 Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Mon, 6 Mar 2017 10:00:31 +0100
Subject: [PATCH] makes the history diff use all available space

---
 frontend/src/component/history/history-item-diff.jsx |  2 +-
 .../src/component/history/history-list-component.jsx | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/history/history-item-diff.jsx b/frontend/src/component/history/history-item-diff.jsx
index 3e921c94ac..0900d0233e 100644
--- a/frontend/src/component/history/history-item-diff.jsx
+++ b/frontend/src/component/history/history-item-diff.jsx
@@ -77,7 +77,7 @@ class HistoryItem extends PureComponent {
             changes = <div className={KLASSES.N}>{JSON.stringify(entry.data, null, 2)}</div>;
         }
 
-        return (<pre style={{ maxWidth: '354px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
+        return (<pre style={{ overflowX: 'auto', overflowY: 'hidden' }}>
             <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
         </pre>);
     }
diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx
index c72c8d6e8a..9e0367cba1 100644
--- a/frontend/src/component/history/history-list-component.jsx
+++ b/frontend/src/component/history/history-list-component.jsx
@@ -20,6 +20,10 @@ class HistoryList extends Component {
             return null;
         }
 
+        const truncateTableCell = v => (
+            <span className={commonStyles.truncate} style={{ display: 'inline-block', verticalAlign: 'middle', width: '100%' }}>{v}</span>
+        );
+
         let entries;
 
         if (showData) {
@@ -33,12 +37,12 @@ class HistoryList extends Component {
                         }, entry))
                     }
                     className={commonStyles.fullwidth}
-                    style={{ border: 0 }}
+                    style={{ border: 0, tableLayout: 'fixed', minWidth: '840px' }}
                 >
-                <TableHeader name="type">Type</TableHeader>
-                <TableHeader name="createdBy">User</TableHeader>
+                <TableHeader name="type" cellFormatter={truncateTableCell} style={{ width: '136px' }}>Type</TableHeader>
+                <TableHeader name="createdBy" cellFormatter={truncateTableCell} style={{ width: '115px' }}>User</TableHeader>
                 <TableHeader name="diff">Diff</TableHeader>
-                <TableHeader numeric name="createdAt" cellFormatter={formatFullDateTime}>Time</TableHeader>
+                <TableHeader numeric name="createdAt" cellFormatter={formatFullDateTime} style={{ width: '165px' }}>Time</TableHeader>
             </Table>);
         }