diff options
| -rw-r--r-- | web/react/components/more_direct_channels.jsx | 14 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 3 | ||||
| -rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 7 |
3 files changed, 23 insertions, 1 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx index a599c1872..e99cdc257 100644 --- a/web/react/components/more_direct_channels.jsx +++ b/web/react/components/more_direct_channels.jsx @@ -193,6 +193,15 @@ export default class MoreDirectChannels extends React.Component { ); } + componentDidUpdate(prevProps) { + if (!prevProps.show && this.props.show) { + $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300); + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar(); + } + } + } + render() { if (!this.props.show) { return null; @@ -249,7 +258,10 @@ export default class MoreDirectChannels extends React.Component { <span className='member-count'>{count}</span> </div> </div> - <div className='user-list'> + <div + ref='userList' + className='user-list' + > <table className='more-table table'> <tbody> {userEntries} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 344b11e9e..0e474a1e2 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -153,6 +153,8 @@ .more-name { font-weight: 600; font-size: 0.95em; + overflow: hidden; + text-overflow: ellipsis; } tbody { > tr { @@ -340,6 +342,7 @@ overflow: auto; -webkit-overflow-scrolling: touch; max-height: 500px; + position: relative; } .table { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 09f2c179e..c41199cac 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -270,6 +270,13 @@ height: auto; } } + .modal-direct-channels { + .member-count { + float: none; + margin-top: 10px; + display: block; + } + } .center-file-overlay { font-size: 1.3em; } |