Use x-scroll for historical records

* Use x-scroll for historical records
* Without, the table overflows the page on mobile
* See #887

lib/ex338_web/templates/page/index.html.eex

@@ -6,10 +6,10 @@
     </div>
   </section>
   <section>
-    <h2 class="pb-4 sm:pb-6 pt-4 sm:pt-10 text-lg sm:text-2xl text-gray-700 text-center ">
+    <h2 class="pt-4 pb-4 text-lg text-center text-gray-700 sm:pb-6 sm:pt-10 sm:text-2xl ">
       Historical Records
     </h2>
-    <div class="flex flex-row flex-wrap justify-center md:justify-around">
+    <div class="sm:justify-center sm:flex-wrap sm:flex-row sm:flex md:justify-around">
       <%= render "season_records_table.html", season_records: @season_records %>
       <%= render "all_time_records_table.html", all_time_records: @all_time_records %>
       <%= render "winnings_table.html", winnings: @winnings %>

lib/ex338_web/templates/page/season_records_table.html.eex

@@ -1,42 +1,44 @@
-<div class="pb-6 md:max-w-4xl">
-  <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-    <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
-      <table class="min-w-full">
-        <thead>
-          <tr>
-            <th class="px-4 sm:px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-              Single Season Records
-            </th>
-            <th class="px-4 sm:px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-              Record
-            </th>
-            <th class="px-4 sm:px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-              Team
-            </th>
-            <th class="px-4 sm:px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-              Year
-            </th>
-          </tr>
-        </thead>
-        <tbody class="bg-white">
-          <%= for record <- @season_records do %>
+<div class="flex flex-col">
+  <div class="pb-6 md:max-w-4xl">
+    <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+      <div class="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg">
+        <table class="min-w-full">
+          <thead>
             <tr>
-              <td class="px-4 sm:px-6 py-2 whitespace-normal border-b font-medium border-gray-200 text-sm leading-5 text-gray-900">
-                <%= record.description %>
-              </td>
-              <td class="px-4 sm:px-6 py-2 whitespace-normal border-b border-gray-200 text-sm leading-5 text-gray-500">
-                <%= record.record %>
-              </td>
-              <td class="px-4 sm:px-6 py-2 whitespace-normal border-b border-gray-200 text-sm leading-5 text-gray-500">
-                <%= record.team %>
-              </td>
-              <td class="px-4 sm:px-6 py-2 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
-                <%= record.year %>
-              </td>
+              <th class="px-4 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 sm:px-6 bg-gray-50 leading-4">
+                Single Season Records
+              </th>
+              <th class="px-4 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 sm:px-6 bg-gray-50 leading-4">
+                Record
+              </th>
+              <th class="px-4 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 sm:px-6 bg-gray-50 leading-4">
+                Team
+              </th>
+              <th class="px-4 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 sm:px-6 bg-gray-50 leading-4">
+                Year
+              </th>
             </tr>
-          <% end %>
-        </tbody>
-      </table>
+          </thead>
+          <tbody class="bg-white">
+            <%= for record <- @season_records do %>
+              <tr>
+                <td class="px-4 py-2 text-sm font-medium text-gray-900 whitespace-normal border-b border-gray-200 sm:px-6 leading-5">
+                  <%= record.description %>
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-normal border-b border-gray-200 sm:px-6 leading-5">
+                  <%= record.record %>
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-normal border-b border-gray-200 sm:px-6 leading-5">
+                  <%= record.team %>
+                </td>
+                <td class="px-4 py-2 text-sm text-gray-500 whitespace-no-wrap border-b border-gray-200 sm:px-6 leading-5">
+                  <%= record.year %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </div>