diff --git a/app/components/post/index.js b/app/components/post/index.js
index 85e88a3a2..d15046d80 100644
--- a/app/components/post/index.js
+++ b/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,
diff --git a/app/components/post/post.js b/app/components/post/post.js
index c3298b6dc..95164b7d7 100644
--- a/app/components/post/post.js
+++ b/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 (
@@ -398,25 +402,27 @@ class Post extends PureComponent {
theme={theme}
isFlagged={isFlagged}
/>
-
+
+
+
diff --git a/app/components/slack_attachments/slack_attachment.js b/app/components/slack_attachments/slack_attachment.js
index 16a453f60..917347360 100644
--- a/app/components/slack_attachments/slack_attachment.js
+++ b/app/components/slack_attachments/slack_attachment.js
@@ -116,7 +116,7 @@ export default class SlackAttachment extends PureComponent {
fieldTables.push(
{fieldInfos}
@@ -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