Updated schedule post within compose modal

Placed dropdown on top

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -109,9 +109,9 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleClickOutside = () => {
-    const { shouldCondense, scheduledAt, text } = this.props;
+    const { shouldCondense, scheduledAt, text, isModalOpen } = this.props;
     const condensed = shouldCondense && !text;
-    if (condensed && scheduledAt) { //Reset scheduled date if condensing
+    if (condensed && scheduledAt && !isModalOpen) { //Reset scheduled date if condensing
       this.props.setScheduledAt(null);
     }
 
@@ -300,7 +300,9 @@ class ComposeForm extends ImmutablePureComponent {
               {!edit && <PollButtonContainer />}
               <PrivacyDropdownContainer />
               <SpoilerButtonContainer />
-              <SchedulePostDropdownContainer />
+              <SchedulePostDropdownContainer
+                position={isModalOpen ? 'top' : undefined}
+              />
             </div>
             <div className='character-counter__wrapper'><CharacterCounter max={maxPostCharacterCount} text={text} /></div>
           </div>

app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js

@@ -37,6 +37,7 @@ class SchedulePostDropdown extends React.PureComponent {
     intl: PropTypes.object.isRequired,
     isPro: PropTypes.bool,
     onOpenProUpgradeModal: PropTypes.func.isRequired,
+    position: PropTypes.string,
   };
 
   handleToggle = () => {
@@ -54,12 +55,12 @@ class SchedulePostDropdown extends React.PureComponent {
   }
 
   render () {
-    const { intl, date, isPro } = this.props;
+    const { intl, date, isPro, position } = this.props;
 
     const open = !!date;
-
     const datePickerDisabled = !isPro;
     const withPortal = isMobile(window.innerWidth);
+    const popperPlacement = position || undefined;
 
     return (
       <div className='schedule-post-dropdown'>
@@ -92,6 +93,7 @@ class SchedulePostDropdown extends React.PureComponent {
             showTimeSelect
             customInput={<DatePickerWrapper />}
             withPortal={withPortal}
+            popperPlacement={popperPlacement}
             popperModifiers={{
               offset: {
                 enabled: true,

app/javascript/styles/gabsocial/components.scss

@@ -5315,13 +5315,14 @@ noscript {
 	text-align: left;
 	width: 145px;
 	height: 26px;
-	line-height: 20px;
+	font-size: 11px;
 	color: $inverted-text-color;
 	background: $simple-background-color;
 
 	@media (max-width: 580px) {
-		width: 138px;
+		width: 124px;
 		font-size: 10px;
 		padding-left: 2px;
+		margin-left: 2px;
 	}
 }