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 a2d2495..0a05856 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 { @@ -97,7 +104,6 @@ height: 10px; background-origin: border-box; transition: background-color .1s; - touch-action: none; position: relative; border-top-width: 2px;