From 571a08aa5482542d8101e53703c2ad6dbff07a1f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 21 May 2021 14:28:16 +0530
Subject: [PATCH] fix: funnel calendar position

---
 frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js  | 1 +
 frontend/app/components/shared/DateRange.js                   | 3 ++-
 .../components/shared/DateRangeDropdown/DateRangeDropdown.js  | 4 ++--
 .../components/shared/DateRangeDropdown/dateRangeDropdown.css | 4 ++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js b/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
index a747c9905..b7d140b1b 100644
--- a/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
+++ b/frontend/app/components/Funnels/FunnelHeader/FunnelHeader.js
@@ -108,6 +108,7 @@ const FunnelHeader = (props) => {
             startDate={funnelFilters.startDate}
             endDate={funnelFilters.endDate}
             onDateChange={onDateChange}
+            customRangeRight
           />          
         </div>
       </div>
diff --git a/frontend/app/components/shared/DateRange.js b/frontend/app/components/shared/DateRange.js
index 83feae0d8..7b627ab28 100644
--- a/frontend/app/components/shared/DateRange.js
+++ b/frontend/app/components/shared/DateRange.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
 function DateRange (props) {
-  const { startDate, endDate, rangeValue, className, onDateChange } = props;
+  const { startDate, endDate, rangeValue, className, onDateChange, customRangeRight=false } = props;
   
   return (
     <DateRangeDropdown
@@ -12,6 +12,7 @@ function DateRange (props) {
       startDate={ startDate }
       endDate={ endDate }
       className={ className }
+      customRangeRight={customRangeRight}
     />
   );  
 }
diff --git a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js b/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
index 4165506d4..f29d47745 100644
--- a/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
+++ b/frontend/app/components/shared/DateRangeDropdown/DateRangeDropdown.js
@@ -66,7 +66,7 @@ export default class DateRangeDropdown extends React.PureComponent {
   }
 
   render() {
-    const { button = false, className, direction = 'right', customHidden=false, show30Minutes=false } = this.props;
+    const { customRangeRight, button = false, className, direction = 'right', customHidden=false, show30Minutes=false } = this.props;
     const { showDateRangePopup, value, range } = this.state;
 
     let options = getDateRangeOptions(range);
@@ -108,7 +108,7 @@ export default class DateRangeDropdown extends React.PureComponent {
         </Dropdown>
         {
           showDateRangePopup &&
-          <div className={ styles.dateRangePopup }>
+          <div className={ cn(styles.dateRangePopup, { [styles.customRangeRight] : customRangeRight}) }>
             <DateRangePopup
               onApply={ this.onApplyDateRange }
               onCancel={ this.onCancelDateRange }
diff --git a/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.css b/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.css
index 868b973ce..27ae5b3bc 100644
--- a/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.css
+++ b/frontend/app/components/shared/DateRangeDropdown/dateRangeDropdown.css
@@ -62,4 +62,8 @@
 .dropdownIcon {
   margin-top: 1px;
   margin-left: 3px;
+}
+
+.customRangeRight {  
+  right: 0 !important;
 }
\ No newline at end of file