Make composer min height conditional and align attachments (#5976)

* Make web composer min height condiitonal

* Fix alignment

* Fix alignment on mobile

src/style.css

@@ -92,9 +92,6 @@ a[role='link'][data-no-underline='1']:hover {
 }
 
 /* ProseMirror */
-.ProseMirror {
-  min-height: 140px;
-}
 .ProseMirror-dark {
   color: white;
 }

src/view/com/composer/Composer.tsx

@@ -565,6 +565,9 @@ function ComposerPost({
   const {_} = useLingui()
   const {data: currentProfile} = useProfileQuery({did: currentDid})
   const richtext = draft.richtext
+  const isTextOnly =
+    !draft.embed.link && !draft.embed.quote && !draft.embed.media
+  const forceMinHeight = isWeb && isTextOnly
   const selectTextInputPlaceholder = isReply
     ? _(msg`Write your reply`)
     : _(msg`What's up?`)
@@ -615,6 +618,7 @@ function ComposerPost({
           richtext={richtext}
           placeholder={selectTextInputPlaceholder}
           autoFocus
+          webForceMinHeight={forceMinHeight}
           setRichText={rt => {
             dispatch({type: 'update_richtext', richtext: rt})
           }}
@@ -757,7 +761,7 @@ function ComposerEmbeds({
       )}
 
       {embed.media?.type === 'gif' && (
-        <View style={a.relative} key={embed.media.gif.url}>
+        <View style={[a.relative, a.mt_lg]} key={embed.media.gif.url}>
           <ExternalEmbedGif
             gif={embed.media.gif}
             onRemove={() => dispatch({type: 'embed_remove_gif'})}
@@ -773,7 +777,7 @@ function ComposerEmbeds({
       )}
 
       {!embed.media && embed.link && (
-        <View style={a.relative} key={embed.link.uri}>
+        <View style={[a.relative, a.mt_lg]} key={embed.link.uri}>
           <ExternalEmbedLink
             uri={embed.link.uri}
             hasQuote={!!embed.quote}

src/view/com/composer/text-input/TextInput.tsx

@@ -43,6 +43,7 @@ export interface TextInputRef {
 interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   richtext: RichText
   placeholder: string
+  webForceMinHeight: boolean
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => void
@@ -230,7 +231,7 @@ export const TextInput = forwardRef(function TextInputImpl(
   }, [t, richtext, inputTextStyle])
 
   return (
-    <View style={[a.flex_1, a.pl_md, a.pb_2xl]}>
+    <View style={[a.flex_1, a.pl_md]}>
       <PasteInput
         testID="composerTextInput"
         ref={textInput}
@@ -244,7 +245,7 @@ export const TextInput = forwardRef(function TextInputImpl(
         allowFontScaling
         multiline
         scrollEnabled={false}
-        numberOfLines={4}
+        numberOfLines={2}
         style={[
           inputTextStyle,
           a.w_full,

src/view/com/composer/text-input/TextInput.web.tsx

@@ -41,6 +41,7 @@ interface TextInputProps {
   richtext: RichText
   placeholder: string
   suggestedLinks: Set<string>
+  webForceMinHeight: boolean
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => void
@@ -52,6 +53,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
   {
     richtext,
     placeholder,
+    webForceMinHeight,
     setRichText,
     onPhotoPasted,
     onPressPublish,
@@ -271,6 +273,13 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     return style
   }, [t, fonts])
 
+  React.useLayoutEffect(() => {
+    let node = editor?.view.dom
+    if (node) {
+      node.style.minHeight = webForceMinHeight ? '140px' : ''
+    }
+  }, [editor, webForceMinHeight])
+
   return (
     <>
       <View style={styles.container}>