fix: Datepicker Style Malfunction Issue. Fixes #11476 (#11480)

Signed-off-by: zel0rd <[email protected]>
argoproj · Aug 1, 2023 · ce9e50c · ce9e50c
1 parent eaa8d9c
commit ce9e50c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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;
+}
diff --git 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 => {