From 78eb51d735cfeecd60ae5e8843f66a023da369a1 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Sun, 18 Jun 2023 09:37:26 +1000
Subject: [PATCH 1/2] Stick hours to the left of the screen when scrolling

---
 .../AvailabilityViewer.module.scss            | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
index a2d2495..1c7d1df 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -15,14 +15,20 @@
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  width: 40px;
   padding-right: 6px;
+  position: sticky;
+  left: 6px;
+  z-index: 5;
+  overflow: hidden;
+  padding-top: 1em;
+  pointer-events: none;
 }
 
 .timeSpace {
   height: 10px;
   position: relative;
   border-top: 2px solid transparent;
+  text-align: right;
 
   &.grey {
     background-origin: border-box;
@@ -37,13 +43,14 @@
 }
 
 .timeLabel {
-  display: block;
-  position: absolute;
-  top: -.7em;
+  display: inline-block;
+  transform: translateY(calc(-50% - 2px));
   font-size: 12px;
-  text-align: right;
   user-select: none;
-  width: 100%;
+  background: var(--background);
+  border-radius: .3em;
+  padding: .1em .2em;
+  white-space: nowrap;
 }
 
 .dateColumn {

From 8c8984e6b40cbeb740cfeb29390e6213c6108d93 Mon Sep 17 00:00:00 2001
From: Benji Grant <benjamin.grantGRA0007@gmail.com>
Date: Sun, 18 Jun 2023 09:44:56 +1000
Subject: [PATCH 2/2] Allow mobile scrolling on viewer

---
 .../src/components/AvailabilityEditor/AvailabilityEditor.tsx     | 1 +
 .../components/AvailabilityViewer/AvailabilityViewer.module.scss | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
index d46cb6e..2666cce 100644
--- a/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
+++ b/frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
@@ -89,6 +89,7 @@ const AvailabilityEditor = ({ times, timezone, value = [], onChange, table }: Av
                     key={y}
                     className={makeClass(styles.time, selecting.length === 0 && styles.editable)}
                     style={{
+                      touchAction: 'none',
                       backgroundColor: isSelected ? palette[1].string : palette[0].string,
                       '--hover-color': isSelected ? palette[0].highlight : palette[1].highlight,
                       ...cell.minute !== 0 && cell.minute !== 30 && { borderTopColor: 'transparent' },
diff --git a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
index 1c7d1df..0a05856 100644
--- a/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
+++ b/frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss
@@ -104,7 +104,6 @@
   height: 10px;
   background-origin: border-box;
   transition: background-color .1s;
-  touch-action: none;
   position: relative;
 
   border-top-width: 2px;