Fix post text overlap (#1371)

app/components/post/index.js

@@ -13,6 +13,7 @@ import {isPostFlagged} from 'mattermost-redux/utils/post_utils';
 
 import {insertToDraft, setPostTooltipVisible} from 'app/actions/views/channel';
 import {addReaction} from 'app/actions/views/emoji';
+import {getDimensions} from 'app/selectors/device';
 
 import Post from './post';
 
@@ -48,10 +49,13 @@ function mapStateToProps(state, ownProps) {
         }
     }
 
+    const {deviceWidth} = getDimensions(state);
+
     return {
         config,
         currentTeamUrl: getCurrentTeamUrl(state),
         currentUserId: getCurrentUserId(state),
+        deviceWidth,
         post,
         isFirstReply,
         isLastReply,

app/components/post/post.js

@@ -41,6 +41,7 @@ class Post extends PureComponent {
         config: PropTypes.object.isRequired,
         currentTeamUrl: PropTypes.string.isRequired,
         currentUserId: PropTypes.string.isRequired,
+        deviceWidth: PropTypes.number.isRequired,
         highlight: PropTypes.bool,
         intl: intlShape.isRequired,
         style: ViewPropTypes.style,
@@ -374,6 +375,9 @@ class Post extends PureComponent {
 
         const onUsernamePress = Config.ExperimentalUsernamePressIsMention ? this.autofillUserMention : this.viewUserProfile;
 
+        // postWidth = deviceWidth - profilePic width - profilePictureContainer margins - right column margin
+        const postWidth = this.props.deviceWidth - 66;
+
         return (
             <View style={[style.container, this.props.style, highlighted, selected]}>
                 <View style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
@@ -398,25 +402,27 @@ class Post extends PureComponent {
                             theme={theme}
                             isFlagged={isFlagged}
                         />
-                        <PostBody
-                            canDelete={this.state.canDelete}
-                            canEdit={this.state.canEdit}
-                            isSearchResult={isSearchResult}
-                            navigator={this.props.navigator}
-                            onAddReaction={this.handleAddReaction}
-                            onCopyPermalink={this.handleCopyPermalink}
-                            onCopyText={this.handleCopyText}
-                            onFailedPostPress={this.handleFailedPostPress}
-                            onPostDelete={this.handlePostDelete}
-                            onPostEdit={this.handlePostEdit}
-                            onPress={this.handlePress}
-                            postId={post.id}
-                            renderReplyBar={commentedOnPost ? this.renderReplyBar : emptyFunction}
-                            toggleSelected={this.toggleSelected}
-                            managedConfig={managedConfig}
-                            isFlagged={isFlagged}
-                            isReplyPost={isReplyPost}
-                        />
+                        <View style={{maxWidth: postWidth}}>
+                            <PostBody
+                                canDelete={this.state.canDelete}
+                                canEdit={this.state.canEdit}
+                                isSearchResult={isSearchResult}
+                                navigator={this.props.navigator}
+                                onAddReaction={this.handleAddReaction}
+                                onCopyPermalink={this.handleCopyPermalink}
+                                onCopyText={this.handleCopyText}
+                                onFailedPostPress={this.handleFailedPostPress}
+                                onPostDelete={this.handlePostDelete}
+                                onPostEdit={this.handlePostEdit}
+                                onPress={this.handlePress}
+                                postId={post.id}
+                                renderReplyBar={commentedOnPost ? this.renderReplyBar : emptyFunction}
+                                toggleSelected={this.toggleSelected}
+                                managedConfig={managedConfig}
+                                isFlagged={isFlagged}
+                                isReplyPost={isReplyPost}
+                            />
+                        </View>
                     </View>
                 </View>
             </View>

app/components/slack_attachments/slack_attachment.js

@@ -116,7 +116,7 @@ export default class SlackAttachment extends PureComponent {
                 fieldTables.push(
                     <View
                         key={`attachment__table__${nrTables}`}
-                        style={{flex: 1, flexDirection: 'row'}}
+                        style={{alignSelf: 'stretch', flexDirection: 'row'}}
                     >
                         {fieldInfos}
                     </View>
@@ -378,7 +378,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         container: {
             borderColor: changeOpacity(theme.centerChannelColor, 0.15),
             borderWidth: 1,
-            flex: 1,
             marginTop: 5,
             padding: 10
         },
@@ -423,7 +422,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             fontSize: 12
         },
         headingContainer: {
-            flex: 1,
+            alignSelf: 'stretch',
             flexDirection: 'row',
             marginBottom: 5,
             marginTop: 10