fix dekstop attach (#28738)

* fix desktop image attach

Author: chrisnojima

shared/.gitignore

@@ -51,6 +51,7 @@ main.jsbundle
 .eslintcache
 .metro-health-check*
 .expo
+.yarn
 
 coverage-ts
 temp.log

shared/chat/conversation/attachment-get-titles.tsx

@@ -165,40 +165,42 @@ const Container = (ownProps: OwnProps) => {
 
   return (
     <Kb.PopupWrapper onCancel={onCancel}>
-      <Kb.Box2 direction="vertical" style={styles.containerOuter} fullWidth={true}>
-        <Kb.ClickableBox2 style={styles.container} onClick={() => inputRef.current?.blur()}>
-          <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
-          {pathAndInfos.length > 0 && !Kb.Styles.isMobile && (
-            <Kb.Box2 direction="vertical" style={styles.filename}>
-              <Kb.Text type="BodySmallSemibold">Filename</Kb.Text>
-              <Kb.Text type="BodySmall" center={true}>
-                {info.filename} ({index + 1} of {pathAndInfos.length})
-              </Kb.Text>
-            </Kb.Box2>
-          )}
-          <Kb.Box2 direction="vertical" fullWidth={true} style={styles.inputContainer}>
-            <Kb.PlainInput
-              ref={inputRef}
-              style={styles.input}
-              autoFocus={!Kb.Styles.isMobile}
-              autoCorrect={true}
-              placeholder={titleHint}
-              multiline={true}
-              rowsMin={2}
-              padding="tiny"
-              value={titles[index]}
-              onEnterKeyDown={onNext}
-              onChangeText={updateTitle}
-              selectTextOnFocus={true}
-            />
-            {/* (
+      <Kb.Box2 alignItems="center" direction="vertical" fullWidth={true} style={styles.container}>
+        <Kb.ClickableBox2 style={styles.container2} onClick={() => inputRef.current?.blur()}>
+          <Kb.Box2 direction="vertical" style={styles.containerOuter} fullWidth={true}>
+            <Kb.BoxGrow style={styles.boxGrow}>{preview}</Kb.BoxGrow>
+            {pathAndInfos.length > 0 && !Kb.Styles.isMobile && (
+              <Kb.Box2 direction="vertical" style={styles.filename}>
+                <Kb.Text type="BodySmallSemibold">Filename</Kb.Text>
+                <Kb.Text type="BodySmall" center={true}>
+                  {info.filename} ({index + 1} of {pathAndInfos.length})
+                </Kb.Text>
+              </Kb.Box2>
+            )}
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.inputContainer}>
+              <Kb.PlainInput
+                ref={inputRef}
+                style={styles.input}
+                autoFocus={!Kb.Styles.isMobile}
+                autoCorrect={true}
+                placeholder={titleHint}
+                multiline={true}
+                rowsMin={2}
+                padding="tiny"
+                value={titles[index]}
+                onEnterKeyDown={onNext}
+                onChangeText={updateTitle}
+                selectTextOnFocus={true}
+              />
+              {/* (
                 <Kb.Checkbox
                   style={{alignSelf: 'flex-end'}}
                   label="Spoiler?"
                   checked={spoiler}
                   onCheck={setSpoiler}
                 />
               )*/}
+            </Kb.Box2>
           </Kb.Box2>
         </Kb.ClickableBox2>
         <Kb.ButtonBar fullWidth={true} small={true} style={styles.buttonContainer}>
@@ -219,7 +221,7 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       boxGrow: {
-        margin: Kb.Styles.globalMargins.small,
+        marginBottom: Kb.Styles.isMobile ? Kb.Styles.globalMargins.small : 0,
         width: '100%',
       },
       buttonContainer: Kb.Styles.platformStyles({
@@ -241,6 +243,11 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingRight: Kb.Styles.globalMargins.small,
         width: '100%',
       },
+      container2: {
+        alignItems: 'center',
+        flexGrow: 1,
+        width: '100%',
+      },
       containerOuter: Kb.Styles.platformStyles({
         isElectron: {
           height: 560,