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] 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 {