diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index f00b74dfd..a01e5a390 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -37,6 +37,7 @@ export default class ColumnsArea extends ImmutablePureComponent { static propTypes = { intl: PropTypes.object.isRequired, columns: ImmutablePropTypes.list.isRequired, + isModalOpen: PropTypes.bool.isRequired, singleColumn: PropTypes.bool, children: PropTypes.node, }; @@ -144,7 +145,7 @@ export default class ColumnsArea extends ImmutablePureComponent { } render () { - const { columns, children, singleColumn } = this.props; + const { columns, children, singleColumn, isModalOpen } = this.props; const { shouldAnimate } = this.state; const columnIndex = getIndex(this.context.router.history.location.pathname); @@ -159,7 +160,7 @@ export default class ColumnsArea extends ImmutablePureComponent { } return ( -
+
{columns.map(column => { const params = column.get('params', null) === null ? null : column.get('params').toJS(); diff --git a/app/javascript/mastodon/features/ui/containers/columns_area_container.js b/app/javascript/mastodon/features/ui/containers/columns_area_container.js index 95f95618b..f3e82a8ac 100644 --- a/app/javascript/mastodon/features/ui/containers/columns_area_container.js +++ b/app/javascript/mastodon/features/ui/containers/columns_area_container.js @@ -3,6 +3,7 @@ import ColumnsArea from '../components/columns_area'; const mapStateToProps = state => ({ columns: state.getIn(['settings', 'columns']), + isModalOpen: !!state.get('modal').modalType, }); export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e8adceb66..dbb277af9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1613,6 +1613,10 @@ justify-content: flex-start; overflow-x: auto; position: relative; + + &.unscrollable { + overflow-x: hidden; + } } @media screen and (min-width: 360px) {