[Glitch] Make columns-area unscrollable when modal opened

Port 2091ae92be to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/ui/components/columns_area.jsx

@@ -58,6 +58,7 @@ const TabsBarPortal = () => {
 export default class ColumnsArea extends ImmutablePureComponent {
   static propTypes = {
     columns: ImmutablePropTypes.list.isRequired,
+    isModalOpen: PropTypes.bool.isRequired,
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
     openSettings: PropTypes.func,
@@ -145,7 +146,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   render () {
-    const { columns, children, singleColumn, openSettings } = this.props;
+    const { columns, children, singleColumn, isModalOpen, openSettings } = this.props;
     const { renderComposePanel } = this.state;
 
     if (singleColumn) {
@@ -172,7 +173,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     }
 
     return (
-      <div className='columns-area' ref={this.setRef}>
+      <div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
         {columns.map(column => {
           const params = column.get('params', null) === null ? null : column.get('params').toJS();
           const other  = params && params.other ? params.other : {};

app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js

@@ -6,6 +6,7 @@ import ColumnsArea from '../components/columns_area';
 
 const mapStateToProps = state => ({
   columns: state.getIn(['settings', 'columns']),
+  isModalOpen: !!state.get('modal').modalType,
 });
 
 const mapDispatchToProps = dispatch => ({

app/javascript/flavours/glitch/styles/components.scss

@@ -2626,6 +2626,10 @@ a.account__display-name {
   overflow-x: auto;
   position: relative;
 
+  &.unscrollable {
+    overflow-x: hidden;
+  }
+
   &__panels {
     display: flex;
     justify-content: center;