fix: update date picker styles (#4635)

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -112,7 +112,14 @@ function CustomTimePickerPopoverContent({
 					</Button>
 				))}
 			</div>
-			<div className="relative-date-time">
+			<div
+				className={cx(
+					'relative-date-time',
+					selectedTime === 'custom' || customDateTimeVisible
+						? 'date-picker'
+						: 'relative-times',
+				)}
+			>
 				{selectedTime === 'custom' || customDateTimeVisible ? (
 					<RangePicker
 						disabledDate={disabledDate}
@@ -124,7 +131,7 @@ function CustomTimePickerPopoverContent({
 						})}
 					/>
 				) : (
-					<div>
+					<div className="relative-times-container">
 						<div className="time-heading">RELATIVE TIMES</div>
 						<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 					</div>

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

@@ -58,8 +58,6 @@
 
 .date-time-root {
 	.ant-popover-inner {
-		width: 532px;
-		min-height: 334px;
 		border-radius: 4px !important;
 		border: 1px solid var(--bg-slate-400);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2) !important;
@@ -129,12 +127,20 @@
 	}
 
 	.relative-date-time {
-		width: 307px;
 		display: flex;
 		flex-direction: column;
 		gap: 35px;
 		padding: 13px 14px;
 
+		&.date-picker {
+			width: 340px;
+			height: 380px;
+		}
+
+		&.relative-times {
+			width: 320px;
+		}
+
 		.relative-date-time-section {
 			display: flex;
 			gap: 6px;

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -53,7 +53,7 @@ export const Options: Option[] = [
 	{ value: '1day', label: 'Last 1 day' },
 	{ value: '3days', label: 'Last 3 days' },
 	{ value: '1week', label: 'Last 1 week' },
-	{ value: 'custom', label: 'Custom...' },
+	{ value: 'custom', label: 'Custom' },
 ];
 
 export interface Option {