From c1a3f0ddf3359373df25dc02d8b47d51160fbf69 Mon Sep 17 00:00:00 2001
From: Oliver Davies <opdavies@gmail.com>
Date: Sat, 13 Jan 2018 08:42:55 +0000
Subject: [PATCH] Fix table wrapping on mobile

Fixes #47
---
 assets/less/components/table.less          | 2 +-
 assets/less/main.less                      | 3 +++
 source/_includes/talks-table-row.html.twig | 8 ++++----
 source/_includes/talks-table.html.twig     | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/less/components/table.less b/assets/less/components/table.less
index b50d8fd08..d5e681557 100644
--- a/assets/less/components/table.less
+++ b/assets/less/components/table.less
@@ -14,5 +14,5 @@
 }
 
 .table td {
-    @apply .p-2 .border-t;
+    @apply .px-2 .py-3 .border-t;
 }
diff --git a/assets/less/main.less b/assets/less/main.less
index ce41c8357..e81da1908 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -62,6 +62,9 @@ svg {
 
 .table-collapse { border-collapse: collapse }
 
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+
 @import 'components/listing';
 @import 'components/post';
 @import 'components/post/about-author';
diff --git a/source/_includes/talks-table-row.html.twig b/source/_includes/talks-table-row.html.twig
index 5a8a550d8..381c8e31a 100644
--- a/source/_includes/talks-table-row.html.twig
+++ b/source/_includes/talks-table-row.html.twig
@@ -1,5 +1,5 @@
 <tr>
-    <td>
+    <td class="whitespace-no-wrap">
         {{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }}
 
         {% if row.event.time is defined %}
@@ -10,7 +10,7 @@
     </td>
 
     {% if not talk_page %}
-        <td>
+        <td class="whitespace-no-wrap">
             {% if row.talk.url is not empty %}
                 <a href="{{ row.talk.url }}">
                     {{ row.talk.title }}
@@ -29,7 +29,7 @@
         </td>
     {% endif %}
 
-    <td>
+    <td class="whitespace-no-wrap">
         {% if row.event.website is not empty %}
             <a href="{{ row.event.website }}">
                 {{ row.event.name }}
@@ -46,7 +46,7 @@
     </td>
 
     {% if not upcoming %}
-        <td>
+        <td class="whitespace-no-wrap">
             {% if row.event.feedback and row.event.date <= today %}
                 <a href="{{ row.event.feedback }}"
                    class="button"
diff --git a/source/_includes/talks-table.html.twig b/source/_includes/talks-table.html.twig
index c76926da0..1ffa3d132 100644
--- a/source/_includes/talks-table.html.twig
+++ b/source/_includes/talks-table.html.twig
@@ -1,5 +1,5 @@
-<div class="overflow-auto">
-    <table class="table">
+<div class="overflow-x-auto overflow-y-hidden w-full mb-4 border">
+    <table class="table w-full mb-0 border-0">
         <thead>
             <tr>
                 <th class="w-1/4">Date</th>