From 71a7fe96d169b9ab5951949e1bff732a8f512e91 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 23 May 2024 08:15:21 +0200
Subject: [PATCH] style: fix input overflow

---
 .../src/common/components/input/time-input/TimeInput.tsx | 9 ++++-----
 .../input/time-input/TimeInputWithButton.module.scss     | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/common/components/input/time-input/TimeInput.tsx b/apps/client/src/common/components/input/time-input/TimeInput.tsx
index 0e8d41bdd..6c4ed8714 100644
--- a/apps/client/src/common/components/input/time-input/TimeInput.tsx
+++ b/apps/client/src/common/components/input/time-input/TimeInput.tsx
@@ -4,9 +4,7 @@ import { millisToString } from 'ontime-utils';
 
 import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { cx } from '../../../utils/styleUtils';
 
-import style from './TimeInput.module.scss';
 interface TimeInputProps<T extends string> {
   name: T;
   submitHandler: (field: T, value: string) => void;
@@ -117,15 +115,13 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
     resetValue();
   }, [resetValue, time]);
 
-  const timeInputClasses = cx([style.timeInput, className]);
-
   return (
     <Input
       disabled={disabled}
       size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={timeInputClasses}
+      className={className}
       fontSize='1rem'
       type='text'
       placeholder={placeholder}
@@ -136,7 +132,10 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
+      maxWidth='7.5em'
+      letterSpacing='1px'
       autoComplete='off'
+      textAlign='center'
     />
   );
 }
diff --git a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
index 6f3563774..0d1c71d1a 100644
--- a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
+++ b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
@@ -8,5 +8,5 @@ $input-delayed-border-color: $ontime-delay-text;
 }
 
 .inputField {
-  max-width: 7.75em;
+  text-align: left;
 }