fix: custom time width and refresh text visibility issues (#4428)

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -37,6 +37,12 @@
 	padding: 4px 8px;
 	padding-left: 0px !important;
 
+	&.custom-time {
+		input:not(:focus) {
+			min-width: 240px;
+		}
+	}
+
 	input::placeholder {
 		color: white;
 	}

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -178,7 +178,10 @@ function CustomTimePicker({
 	return (
 		<div className="custom-time-picker">
 			<Popover
-				className="timeSelection-input-container"
+				className={cx(
+					'timeSelection-input-container',
+					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+				)}
 				placement="bottomRight"
 				getPopupContainer={popupContainer}
 				content={content}
@@ -193,12 +196,7 @@ function CustomTimePicker({
 				<Input
 					className="timeSelection-input"
 					type="text"
-					style={{
-						minWidth: '120px',
-						width: '100%',
-					}}
 					status={inputValue && inputStatus === 'error' ? 'error' : ''}
-					allowClear={!isInputFocused && selectedTime === 'custom'}
 					placeholder={
 						isInputFocused
 							? 'Time Format (1m or 2h or 3d or 4w)'

frontend/src/container/TopNav/DateTimeSelection/DateTimeSelection.styles.scss

@@ -0,0 +1,3 @@
+.date-time-selection-container {
+	margin-bottom: 16px;
+}

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -1,3 +1,5 @@
+import './DateTimeSelection.styles.scss';
+
 import { SyncOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
@@ -294,7 +296,7 @@ function DateTimeSelection({
 	}, [location.pathname, updateTimeInterval, globalTimeLoading]);
 
 	return (
-		<>
+		<div className="date-time-selection-container">
 			<Form
 				form={formSelector}
 				layout="inline"
@@ -335,7 +337,7 @@ function DateTimeSelection({
 				</FormContainer>
 			</Form>
 
-			{!hasSelectedTimeError && (
+			{!hasSelectedTimeError && selectedTime !== 'custom' && (
 				<RefreshText
 					{...{
 						onLastRefreshHandler,
@@ -351,7 +353,7 @@ function DateTimeSelection({
 					setCustomDTPickerVisible(false);
 				}}
 			/>
-		</>
+		</div>
 	);
 }
 

frontend/src/container/TopNav/DateTimeSelection/styles.ts

@@ -24,7 +24,6 @@ interface Props {
 }
 
 export const RefreshTextContainer = styled.div<Props>`
-	min-height: 2rem;
 	visibility: ${({ refreshButtonHidden }): string =>
 		refreshButtonHidden ? 'hidden' : 'visible'};
 `;