diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index f00b74dfdc..a01e5a390e 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 95f95618b2..f3e82a8ac2 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 e8adceb668..dbb277af96 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) {