From ce9e50cd8f6063bdcd15dad4dfdb32e19b639faa Mon Sep 17 00:00:00 2001
From: younggil <zelord.kwoun@gmail.com>
Date: Tue, 1 Aug 2023 09:31:48 +0900
Subject: [PATCH] fix: Datepicker Style Malfunction Issue. Fixes #11476
 (#11480)

Signed-off-by: zel0rd <zelord.kwoun@gmail.com>
---
 .../components/workflow-filters/workflow-filters.scss      | 7 +++++++
 .../components/workflow-filters/workflow-filters.tsx       | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss b/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss
index 65f18b9410ca..3e9a03ad1463 100644
--- a/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss
+++ b/ui/src/app/workflows/components/workflow-filters/workflow-filters.scss
@@ -26,3 +26,10 @@
     background-color: transparent;
     border: 0;
 }
+
+.wf-filters-container__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
index 660b687c7473..dd964308993c 100644
--- a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
+++ b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import * as models from '../../../../models';
 import {WorkflowPhase} from '../../../../models';
 import {CheckboxFilter} from '../../../shared/components/checkbox-filter/checkbox-filter';
@@ -96,7 +97,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                     </div>
                     <div className='columns small-5 xlarge-12'>
                         <p className='wf-filters-container__title'>Started Time</p>
-                        <div>
+                        <div className='wf-filters-container__content'>
                             <DatePicker
                                 selected={this.props.minStartedAt}
                                 onChange={date => {
@@ -114,7 +115,7 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                                 <i className='fa fa-times-circle' />
                             </a>
                         </div>
-                        <div>
+                        <div className='wf-filters-container__content'>
                             <DatePicker
                                 selected={this.props.maxStartedAt}
                                 onChange={date => {