From edc9543120d1c381f0a77ab936c2cbb884aa9337 Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Sat, 26 Sep 2020 20:48:58 +0000
Subject: [PATCH] css tweaks for better phone display

---
 css/calendar.css | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/css/calendar.css b/css/calendar.css
index 3281a92..4d0de87 100644
--- a/css/calendar.css
+++ b/css/calendar.css
@@ -1,8 +1,3 @@
-.calendar-wrapper {
-  display: block;
-  /* max-height: 500px; */
-  /* overflow-y: scroll; */
-}
 .calendar {
   font-family: sans-serif;
   width: 100%;
@@ -61,6 +56,7 @@
   position: relative;
   height: 32px;
   cursor: pointer;
+	overflow: hidden;
 }
 .calendar tbody tr td:last-child {
   border-right: 1px solid #626E7E;
@@ -78,6 +74,16 @@
   display: block;
 }
 @media (max-width: 60em) {
+  .calendar-wrapper {
+    display: block;
+    overflow-x: scroll;
+  }
+  .calendar {
+    min-width: 800px;
+  }
+  .calendar tbody tr td.hour {
+    font-size: 16px;
+  }
   .calendar thead tr th .long {
     display: none;
   }
@@ -91,6 +97,17 @@
   }
 }
 @media (max-width: 27em) {
+  .calendar-wrapper {
+    display: block;
+    overflow-x: scroll;
+  }
+  .calendar {
+    min-width: 800px;
+  }
+  .calendar tbody tr td.hour {
+    font-size: 16px;
+    text-align: right;
+  }
   .calendar thead tr th {
     font-size: 65%;
   }
@@ -107,9 +124,6 @@
     background: #d1d5db;
     color: #626E7E;
   }
-  .calendar tbody tr td.hour {
-    font-size: 1.7em;
-  }
   .calendar tbody tr td.hour span {
     transform: translateY(16px) rotate(270deg);
     -webkit-transform: translateY(16px) rotate(270deg);