From 283b60e91b9daa382c0c4ed429c30138d15ea0a5 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Mon, 12 Apr 2021 13:38:55 +1000
Subject: [PATCH] Prevent time labels overlapping

https://github.com/GRA0007/crab.fit/issues/1
---
 .../src/components/TimeRangeField/TimeRangeField.tsx          | 4 +++-
 .../src/components/TimeRangeField/timeRangeFieldStyle.ts      | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
index dfb0695..cefb27a 100644
--- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
+++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx
@@ -64,7 +64,7 @@ const times = {
   	'21',
   	'22',
   	'23',
-  	'0',
+  	'24',
   ],
 };
 
@@ -124,6 +124,7 @@ const TimeRangeField = ({
 				<Handle
 					value={start}
 					label={times[timeFormat][start]}
+          extraPadding={end - start === 1 ? 'padding-right: 20px;' : (start - end === 1 ? 'padding-left: 20px;' : '')}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isStartMoving.current = true;
@@ -146,6 +147,7 @@ const TimeRangeField = ({
 				<Handle
 					value={end}
 					label={times[timeFormat][end]}
+          extraPadding={end - start === 1 ? 'padding-left: 20px;' : (start - end === 1 ? 'padding-right: 20px;' : '')}
 					onMouseDown={() => {
 						document.addEventListener('mousemove', handleMouseMove);
 						isEndMoving.current = true;
diff --git a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
index 1abe59c..63812bf 100644
--- a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
+++ b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts
@@ -60,6 +60,7 @@ export const Handle = styled.div`
 		text-align: center;
 		left: 50%;
 		transform: translateX(-50%);
+    ${props => props.extraPadding}
 	}
 `;