Responsive upload list table.

app/components/upload-list.js

@@ -3,35 +3,49 @@ import uploadsQuery from '../queries/uploads'
 
 const UploadList = ({data: {uploads}}) => {
   return (
-    <table>
+    <div>
-      <thead>
+      <table>
-        <tr>
+        <thead>
-          <th>Name</th>
+          <tr>
-          <th>Type</th>
+            <th>Name</th>
-          <th>Size</th>
+            <th>Type</th>
-          <th>Path</th>
+            <th>Size</th>
-        </tr>
+            <th>Path</th>
-      </thead>
-      <tbody>
-        {uploads.map(({id, name, type, size, path}) => (
-          <tr key={id}>
-            <td>{name}</td>
-            <td>{type}</td>
-            <td>{size}</td>
-            <td>{path}</td>
           </tr>
-        ))}
+        </thead>
-      </tbody>
+        <tbody>
+          {uploads.map(({id, name, type, size, path}) => (
+            <tr key={id}>
+              <td>{name}</td>
+              <td>{type}</td>
+              <td>{size}</td>
+              <td>{path}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
       <style jsx>{`
+        div {
+          overflow-x: auto;
+          -webkit-overflow-scrolling: touch;
+          -ms-overflow-style: -ms-autohiding-scrollbar;
+        }
         table {
+          border-spacing: 0;
+          padding: 1em 0;
           text-align: left;
-          border-spacing: 0.75em;
+          font-size: 90%;
+        }
+        th,
+        td {
+          padding: 0.3em 0.5em;
         }
         td {
           vertical-align: top;
+          white-space: nowrap;
         }
       `}</style>
-    </table>
+    </div>
   )
 }