diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index a599c18722..e99cdc257f 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 {
{count}
-
+
{userEntries}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 344b11e9e1..0e474a1e23 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 09f2c179ea..c41199cac3 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;
}