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