From 34758d7c890624071165c36ac9397acb596b7f92 Mon Sep 17 00:00:00 2001
From: Jayden Seric <me@jaydenseric.com>
Date: Sun, 9 Apr 2017 15:14:32 +1000
Subject: [PATCH] Responsive upload list table.

---
 app/components/upload-list.js | 54 ++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/app/components/upload-list.js b/app/components/upload-list.js
index b065007..ac9aba2 100644
--- a/app/components/upload-list.js
+++ b/app/components/upload-list.js
@@ -3,35 +3,49 @@ import uploadsQuery from '../queries/uploads'
 
 const UploadList = ({data: {uploads}}) => {
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Size</th>
-          <th>Path</th>
-        </tr>
-      </thead>
-      <tbody>
-        {uploads.map(({id, name, type, size, path}) => (
-          <tr key={id}>
-            <td>{name}</td>
-            <td>{type}</td>
-            <td>{size}</td>
-            <td>{path}</td>
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Size</th>
+            <th>Path</th>
           </tr>
-        ))}
-      </tbody>
+        </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>
+          ))}
+        </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>
   )
 }