Fix android bottom border with a spacing wrapper

Expensify · Jun 3, 2022 · 5cecb2c · 5cecb2c
1 parent e7d9078
commit 5cecb2c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 52 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -573,56 +573,58 @@ class ReportActionCompose extends React.Component {
                                         </>
                                     )}
                                 </AttachmentPicker>
-                                <Composer
-                                    autoFocus={this.shouldFocusInputOnScreenFocus || _.size(this.props.reportActions) === 1}
-                                    multiline
-                                    ref={this.setTextInputRef}
-                                    textAlignVertical="top"
-                                    placeholder={inputPlaceholder}
-                                    placeholderTextColor={themeColors.placeholderText}
-                                    onChangeText={this.updateComment}
-                                    onKeyPress={this.triggerHotkeyActions}
-                                    onDragEnter={(e, isOriginComposer) => {
-                                        if (!isOriginComposer) {
-                                            return;
-                                        }
-
-                                        this.setState({isDraggingOver: true});
-                                    }}
-                                    onDragOver={(e, isOriginComposer) => {
-                                        if (!isOriginComposer) {
-                                            return;
-                                        }
-
-                                        this.setState({isDraggingOver: true});
-                                    }}
-                                    onDragLeave={() => this.setState({isDraggingOver: false})}
-                                    onDrop={(e) => {
-                                        e.preventDefault();
-
-                                        const file = lodashGet(e, ['dataTransfer', 'files', 0]);
-                                        if (!file) {
-                                            return;
-                                        }
-
-                                        displayFileInModal({file});
-                                        this.setState({isDraggingOver: false});
-                                    }}
-                                    style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
-                                    defaultValue={this.props.comment}
-                                    maxLines={this.state.maxLines}
-                                    onFocus={() => this.setIsFocused(true)}
-                                    onBlur={() => this.setIsFocused(false)}
-                                    onPasteFile={file => displayFileInModal({file})}
-                                    shouldClear={this.state.textInputShouldClear}
-                                    onClear={() => this.setTextInputShouldClear(false)}
-                                    isDisabled={isComposeDisabled || isBlockedFromConcierge}
-                                    selection={this.state.selection}
-                                    onSelectionChange={this.onSelectionChange}
-                                    isFullComposerAvailable={this.state.isFullComposerAvailable}
-                                    setIsFullComposerAvailable={this.setIsFullComposerAvailable}
-                                    isComposerFullSize={this.props.isComposerFullSize}
-                                />
+                                <View style={styles.textInputComposeSpacing}>
+                                    <Composer
+                                        autoFocus={this.shouldFocusInputOnScreenFocus || _.size(this.props.reportActions) === 1}
+                                        multiline
+                                        ref={this.setTextInputRef}
+                                        textAlignVertical="top"
+                                        placeholder={inputPlaceholder}
+                                        placeholderTextColor={themeColors.placeholderText}
+                                        onChangeText={this.updateComment}
+                                        onKeyPress={this.triggerHotkeyActions}
+                                        onDragEnter={(e, isOriginComposer) => {
+                                            if (!isOriginComposer) {
+                                                return;
+                                            }
+
+                                            this.setState({isDraggingOver: true});
+                                        }}
+                                        onDragOver={(e, isOriginComposer) => {
+                                            if (!isOriginComposer) {
+                                                return;
+                                            }
+
+                                            this.setState({isDraggingOver: true});
+                                        }}
+                                        onDragLeave={() => this.setState({isDraggingOver: false})}
+                                        onDrop={(e) => {
+                                            e.preventDefault();
+
+                                            const file = lodashGet(e, ['dataTransfer', 'files', 0]);
+                                            if (!file) {
+                                                return;
+                                            }
+
+                                            displayFileInModal({file});
+                                            this.setState({isDraggingOver: false});
+                                        }}
+                                        style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
+                                        defaultValue={this.props.comment}
+                                        maxLines={this.state.maxLines}
+                                        onFocus={() => this.setIsFocused(true)}
+                                        onBlur={() => this.setIsFocused(false)}
+                                        onPasteFile={file => displayFileInModal({file})}
+                                        shouldClear={this.state.textInputShouldClear}
+                                        onClear={() => this.setTextInputShouldClear(false)}
+                                        isDisabled={isComposeDisabled || isBlockedFromConcierge}
+                                        selection={this.state.selection}
+                                        onSelectionChange={this.onSelectionChange}
+                                        isFullComposerAvailable={this.state.isFullComposerAvailable}
+                                        setIsFullComposerAvailable={this.setIsFullComposerAvailable}
+                                        isComposerFullSize={this.props.isComposerFullSize}
+                                    />
+                                </View>
                             </>
                         )}
                     </AttachmentModal>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1384,7 +1384,6 @@ const styles = {
         // paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center'
 
         paddingHorizontal: 8,
-        marginVertical: 5,
         paddingVertical: 0,
         ...textInputAlignSelf.center,
         textAlignVertical: 'center',
@@ -1394,8 +1393,12 @@ const styles = {
         alignSelf: 'flex-end',
         flex: 1,
         maxHeight: '100%',
-        marginVertical: 0,
+    },
+
+    textInputComposeSpacing: {
         paddingVertical: 5,
+        ...flex.flexRow,
+        flex: 1,
     },
 
     chatItemSubmitButton: {