Updated Composer styles to hide scrollbars and fit heights

• Updated:
- Composer styles to hide scrollbars and fit heights

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -197,6 +197,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     const textareaContainerClasses = CX({
       d: 1,
       maxW100PC: 1,
+      h100PC: !small,
       flexGrow1: small,
       jcCenter: small,
       py5: small,
@@ -225,7 +226,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     return (
       <React.Fragment>
         <div className={textareaContainerClasses}>
-          <label htmlFor={id} className={_s.visiblyHidden}>
+          <label htmlFor={id} className={[_s.visiblyHidden, _s.displayNone].join(' ')}>
             {placeholder}
           </label>
           

app/javascript/gabsocial/components/composer.js

@@ -255,10 +255,11 @@ class Composer extends React.PureComponent {
       px15: !small,
       px10: small,
       pb10: !small,
+      h100PC: !small,
     })
 
     return (
-      <div className={_s.d}>
+      <div className={[_s.d, _s.flex1].join(' ')}>
 
         {
           isPro &&

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

@@ -217,17 +217,6 @@ class ComposeForm extends ImmutablePureComponent {
     const disabledButton =  isSubmitting || isUploading || isChangingUpload || length(text) > MAX_POST_CHARACTER_COUNT || (length(text.trim()) === 0 && !anyMedia)
     const shouldAutoFocus = autoFocus && !isMobile(window.innerWidth)
 
-    const containerClasses = CX({
-      d: 1,
-      pb10: 1,
-      calcMaxH410PX: 1,
-      minH200PX: isModalOpen && isMatch,
-      overflowYScroll: 1,
-      boxShadowBlock: 1,
-      borderTop1PX: 1,
-      borderColorSecondary: 1,
-    })
-
     const textbox = (
       <AutosuggestTextbox
         ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
@@ -279,9 +268,22 @@ class ComposeForm extends ImmutablePureComponent {
       )
     }
 
+    const containerClasses = CX({
+      d: 1,
+      pb10: 1,
+      calcMaxH410PX: 1,
+      mb10: 1,
+      minH200PX: isModalOpen && isMatch,
+      overflowYScroll: 1,
+      flex1: 1,
+      boxShadowBlock: length(text) > 64,
+      borderTop1PX: 1,
+      borderColorSecondary: 1,
+    })
+
     return (
       <div className={[_s.d, _s.w100PC, _s.flexGrow1, _s.bgPrimary].join(' ')}>
-        <div className={[_s.d, _s.calcMaxH410PX, _s.overflowYScroll].join(' ')}>
+        <div className={[_s.d, _s.calcMaxH410PX, _s.minH98PX].join(' ')}>
 
           <ComposeDestinationHeader formLocation={formLocation} account={account} isModal={isModalOpen} />
 

app/javascript/styles/global.css

@@ -555,7 +555,7 @@ pre {
 
 .calcMaxH410PX { max-height: calc(100vh - 450px); }
 @media (min-width: 0px) and (max-width:992) { .calcMaxH410PX { max-height: calc(100vh - 410px); }  }
-@media (min-height: 0px) and (max-height:660px) { .calcMaxH410PX { max-height: calc(100vh - 140px); } }
+@media (min-height: 0px) and (max-height:660px) { .calcMaxH410PX { max-height: calc(100vh - 240px); } }
 
 .minH100VH { min-height: 100vh; }
 .minH50VH { min-height: 50vh; }